I had the pleasure of going to Japan to attend WordCamp Tokyo and as part of the trip I was determined to blog every day. Whilst I posted after, I managed to keep that promise to myself by writing each day in Simplenote thoughts to process into posts. On my return, I created a new blog to focus on the inspiration I get whilst travelling, introducing Travelpiration.
After much nudging by a friend (props Davide), I also have begun a blog about what I eat on my travels. Being vegan and gluten free is an interesting combination when exploring. Veganplore is now where I hope to share the places I discover.
During my trip to Japan I took some time off from work. I got to do a lot of thinking and in writing these blog posts rediscover my passion for just writing again. Writing without caring how the words fall, that’s the approach I have taken in these posts and the freedom that brings me refuels. I feel recharged and whilst still processing the benefits of the trip, I know it’s going to be one that has reminded me of well me. Of what I enjoy and how I should do it more.
Have you ever wondered what something is called within Gutenberg? This guide is meant to help by giving the names and the expected behaviour of some of the basic design elements. If you want to build blocks and extend Gutenberg, knowing what to use or not is important. This is meant as a starting point, not a full description of all design elements.
There are two toolbars:
The Editor toolbar: This controls document tools like undo and information. Also within this toolbar are preview, publishing and saved state.
The Block toolbar: This controls block specific behaviour, for example in a paragraph block bold/italic and adding a link. As a guide, place common settings that a user would want for every version of that block in the block toolbar.
These are also referred to as 'advanced settings' when linked from the block toolbar.
There are two settings:
Document: This gives you global settings for the entire document like visibility and reviewing. Think of this like your settings panel for your content.
Format: This is per block and changes depending on the block and if it even has settings. These differ from the toolbar as are secondary block settings, for example adding a CSS class (in most blocks) and doing styling that isn’t as common.
These come in 2 locations:
Document: These contain document settings such as switching display modes, position of toolbar. Anything that is not specific to a block or the document would go here, for example display modes or something like a spell check.
Block: When beside the block there are commonalities found in all blocks:
Hide Advanced Settings (if visible) or Show (if hidden)
Edit as HTML
Convert to Reusable Block
Convert to another Block and a list of those blocks.
As a guide you’d not be adding to these menus in a custom block. You’d ideally use something like the advanced settings here.
It's worth noting that insert is changing to add potentially. There are multiple ways to add a block in Gutenberg to content:
Toolbar (although this may be removed)
Above a block: a ‘+’ appears on hover
Below the block: a ‘+’ shows all the time to interact with
The library appears when you click to add and then you see all blocks available. You can also search for the block by name. Blocks are in sections both through tabs and in within each section there are categories.
Recent blocks also shows all the blocks a user has been using frequently.
You can view information about a block by clicking ‘i’. This contains helpful document information like number or words written.
I set myself a little holiday project this year, to consolidate and create a theme to use across a few of my sites. With this move I merged my two writing blogs into one and began a long needed update to my portfolio. I wanted to do this using Gutenberg and the Gutenberg theme as a base. The Gutenberg theme is based on _s, open source and a community project, so a great starting point.
Gutenberg for those who don't know is the new publishing experience for WordPress. It's a block based approach to creating content that focuses on an easier experience for every user.
One of the big drives for me wasn't just that I am working on the project, focusing on the editor – although testing is always a strong motivation of mine. I was using Gutenberg already on this blog, I wanted to take it further. How much could be done just in Gutenberg with a simple theme style guide? How reduced could the theme go?
A bonus reason in doing this project, was that I could add to the Gutenberg theme. It's worth saying that Gutenberg doesn't need a specific theme to work. The Gutenberg theme is designed to showcase what a theme could be with Gutenberg. It's an experiment into how close can both the front and back look and has the styling for blocks rolled in.
I wanted from the start to strip right back everything and then have a solid base to grow from. I knew I wanted a minimal theme and that the footprint should be as light as possible. I also want this coming year to learn more about performance optimising on the front end, so this is a good starting point. Where possible, as much styling and functionality was to come from Gutenberg, without adding in the theme. As far as it could be, this would be a pure CSS design.
I set myself some fairly strict boundaries. Firstly, I wanted to make sure this was released and live on the sites by the 29th December, this post was the final step. I wanted to use just one feature colour, that I haven't before so picked the Pantone 2018 color of the year, Ultraviolet. I also wanted to have an off-white background to make it easier to read longer posts. Typography wise, I restricted myself to one font, in this case Roboto.
One of the big things I wanted to do was make as few changes as possible to the base of Gutenberg theme, to really make this as much just CSS as possible. This was fairly easy to do as the theme itself has styling for most blocks and as part of this exercise I got to commit some pull requests that added some additional styling.
I began sketching and this was what I came up with as a first version:
The following were the changes aside from colors and typorgaphy, that I made to the theme:
Social icon SVG menu: A good potential future block, but not one that exists today.
Removed menu and reduced header: I removed pretty much all the header and menu in the Gutenberg theme. I wanted this to come within the content so used a reusable block for this. Once Gutenberg has a menu block this can be changed to that, probably coming in the Customization focus.
Reduced footer: Again I wanted to use the social menu in the footer and remove as much there from the theme. In the Customization focus things like reusable layout blocks may become a reality, so this steps towards that.
Animation for link and text loading on page: These animations are subtle but they load gradually content. Gutenberg allows me to add a style to each block and using this I can gradually fade in a page's content.
Distilled a lot of post meta: I only wanted to show the date for now.
What is up now will change over time and is very much a first step. I plan to iterate as I add content and Gutenberg nears release in WordPress 5.0. I now have a base to build up from and a great starting point. One of my 2018 goals is going to be to blog more, so it's a great start to that goal.
Overall, it was a pretty smooth experience creating this theme and putting Gutenberg at the heart. I do know Gutenberg, so therefore the headstart was something I had. I also am ok with any rough edges at this point, there's a lot of experimenting here and I have that luxury with it being my own sites. This is very much a work in progress but that's a good thing as I can now take time iterating.
On the testing side, I have several issues I can report and some enhancements to suggest. Doing this reminded me how important using the products you are making is. When you are actually working with what you are creating, there are insights to be gained that when busy designing the product, you just don't get.
For those of you that want to explore it, the theme can be found here with all my styling changes. The vanilla Gutenberg theme can be found here, and is a better starting point, pull requests and issues welcome.
Every designer at Automattic is writing a monthly design post, this month my post was about triage practice. For me the process is an integral part of being a designer. Triage for me is a constant part of my journey within Automattic and in the wider WordPress community. It continues to be really important to me as a designer, it keeps my feedback and testing muscles healthy.
A few months ago I began a journey to learn Colemak. Yesterday I switched back to Qwerty. There were a number of reasons I stepped off my adventure into Colemak, but perhaps its better to start at the why I began that journey.
The luxury of trying
In my job I have the luxury of being able to experiment with what works for me. I had toyed with the idea of trying a different keyboard layout as a lot of colleagues had. They were split between Colemak and Dvorak.
The tipping point
There were a few factors that made me make the change
New MacBook key sounds: the keys are super loud, similar to a mouse in boots tap dancing loud, when I get a good conversational pace going.
Wrist pain: over the years I haven't been great to my wrists with typing strain and they were reminding me of this factor.
Wanting to reduce my typing speed: a maybe unexpected motivation was to add more thought to my typing by reducing the speed.
I began my journey into Colemak possibly naively by going 100% in with doing it all the time. I did however use a cover. There was a problem with this though quite early on, the cover began warping and it kept leaving marks on my screen – not great.
I moved onto using stickers and this may have been where one of my downfalls began. The only stickers I could find meant you saw 2 letters – the ones on the keys and the stickers. This got even worse at night because the keys highlighted the Qwerty ones. I was rapidly finding things more and more of a struggle
The end coming
I found my spelling mistakes went through the roof. I have a lot of spelling issues as it is and my comprehension can at times be creative. However, it was compounded by trying to learn Colemak, to the point not a sentence would go by without issues. Just writing this in Qwerty already I am back to my usual pace of mistakes.
A different voice
One thing I did not expect to discover was a change in my writing voice. In the past my use of punctuation was somewhat lazy. It has on more than one occasion been suggested I should purchase a box of commas. As I was writing in Colemak this strange thing happened, I found commas.
Beyond my discovery of commas, the voice was slightly different. This was an unnerving effect. Not one I was sure I wanted. I did not feel it was a positive change either. In some respects I felt it lacked personality, it lacked emotion. Because I was having a lot of issues with typing the words, I became minimal to a point that wasn't always good. It also tested my patience, although that was a nice thing to test at times, at others it could have created a bad response from me.
Mental model comfort
I never have learnt to touch type, I have this kind of weird half memory, half some fingers typing method. Its clumsy and inelegant to view, but it sure gets the job done.
I find touch typing very hard and the lessons to do it close torture. They make me panic, which has this awesome side effect of my Dyslexia going into overdrive. As I switched to Colemak, I began typing lessons that seemed like old scary ghosts back to haunt me.
I did try for several months but it came to a point where the benefits were not out weighing the gains. I had less wrist pain, yet the mistakes and brain hurdles I was causing myself were not worth the change. Even the keyboard sound was loud once I took the cover off and the covers don't work yet well with the new MacBooks.
Reverting doesn't mean other issues have gone away. I suspect my wrist pain will surface soon enough. Yet, I will combat this in other ways such as specific exercises and actually being better at breaks. I may have changed my keyboard layout but I did not get better at taking breaks. A keyboard layout isn't a magic cure all.
What I have learnt is this:
Exercising my wrists and taking breaks is more important than switching a keyboard layout.
The ghosts of typing lessons need to be conquered. I plan on finally learning to properly touch type.
Experiments don't have to succeed and I am lucky to be able to do them where I work.
I have more respect for those with slower typing speeds, for whatever reason. I want to try and keep the pace more considered and hold onto that respect.
This week I had the pleasure of attending UX Scotland. During the conference I got to attend an awesome sketchnotes workshop by Dr Makayla Lewis. It was great to rekindle sketching and I really enjoyed the ‘just do it’ nature of the session.
We were encouraged to spend the next day practicing our sketching and I did just that. I also created a little site to start documenting the process. I really want to work and get better at these notes.
I am using my iPad and Procreate so far, with a Bamboo stylus. I want to experiment a bit to see what works best, but I am happy with my results so far.
I actually found I took maybe more in from the sessions sketchnoting over just sitting there. This having to process to pull out content, really had a positive, interesting improvement in my listening to the talks. I plan to do this a little. I also really enjoyed it.
It was really fun to rediscover and get brave about just sketchnoting.
It seems over the past few months I've got asked a lot about what books I'd recommend. Passing on good book recommendations is always something I enjoy and it's a pleasure to be asked. It got me thinking of how I could put up a list across a range of topics and share that. I was further prompted by Ola Olusoga sharing this amazing list with me.
My recommended reading list is here, I plan on trying to keep it up to date also. I wanted to take away from any service as this list isn't as much about everything I've read as about things I really recommend for everyone interested or working in those areas.
The reading list covers a wide but also complimentary list of subjects and the list may grow. Currently there are books on:
Psychology, humans and brains.
Design and experience.
Business and products.
Future thinking, digital theory and open source: a big section but these books compliment each other.
Creating a list like this is really interesting to do and I can recommend it, if nothing else it means you have an easy reachable resource the next time someone asks for recommendations.
It seems like not a day, even hour, goes past without some new amazing framework or outstanding technique that you just have to try. Posts stream past social media on this break through, that amazing new hotness and ‘oh my wow this just changes everything’! In all this excitement, all this wonder, haven’t we forgotten something? What about the users?
The actual process of building a site is now heavy burden wise. There’s so much to learn, so much to get your head around and deal with. Optimising this, making sure you know the latest x, y and z, keeping up with everything just makes your head spin. The seemingly endless noise of debates over this right way or that. Does any of it really matter though? Isn’t the voice we should be hearing the loudest that of the users? Yet, we can’t hear them because we’re too busy listening to an argument about what new editor is the best.
Don’t get me wrong in all this, I absolutely believe that a lot of new processes do actually bring user benefits. There are some truly amazing experience gains. My point is more about the ratio of sound, about what we’re paying attention to in our limited span. Usability matters for everyone, it’s not just something you should pay attention to if your job title contains the words ‘User Experience’. The problem is that the majority of the time no focus at all is given to even how the new shiny will benefit the users. It very well may, but in not saying it’s taking the focus away from something that should be at the heart of our conversations, our posts, our Twitter streams.
We are fickle with our focus, if it’s not being talked about it just isn’t part of our headspace. This has happened to users. We’ve filled the space full of cosmic code and incredible tools. Our soundtrack is podcasts about the next big thing, whilst putting down the current big thing and saying the next next big thing will be the one. Our conference tracks are full of demos to blow minds and impractical practicals.
Meanwhile, users cope. Users learn the ‘way’ of applications and are forced into accepting experiences. They shout their frustrations in one room while most of us are in the other room having our minds blown by a function. This has to change and I am optimistic the signs are showing that this year it will happen. I hope the ratio of noise on our self important modern building process dials down. As it does, we can start to truly create experiences that listen to users. That aren’t created just for our headspace, our friends, our colleagues and bubble. That are inclusive and actually enable those that use them.
One of the things about humans is we are whether we like it or not a herd animal. We have an instinct to move as a group and our primitive brain responds just like a herding animal. When creating interaction paths even in digital purchasing, you can use this aspect of human nature. Supermarkets are a shining example of how you can sell to the herd.
Humans display herding behaviour in a number of ways. Whilst I’m not going to cover it too much in this post, herding behaviour is a really interesting thing to look into. Crowd psychology is something along with the Information Cascade, I’d really suggest as interesting reading. Supermarkets are masters of getting us to buy things. They do this in a vast number of subtle and less subtle ways – some good and some questionable. From the music used to the size of the basket and position of the goods. Psychological tricks and guides are at play in all areas of the supermarket.
The most obvious one is the path that supermarkets take you on. There literally is one exit. This is also clearly marked and you without thinking are guided through to it. The key here is without thinking. Each aisle is placed with thought but requires you as a human to not think about it. The supermarket equivalent of a and b testing is moving an aisle around. The aisles are clearly marked, there is no guessing. Big graphics guide you through if you look up, product types guide you if you just follow the shelves. The journey they are taking you on is carefully planned. Think of how a farmer guides their herd into milking or sheep into a pen using a sheep dog. This is what supermarkets are doing to us.
Positioning and highlighting
Where a product is displayed not only in aisle order but in shelve order is also key to purchase. A simple example would be placing more expensive things at eye level. Same goes with the ‘gut purchase’ shelves put at the end of aisles that highlight special offers. The way the shelf and aisle is designed too is important. Think about lighting for example shining down on specific things or designed to make it’s aisle’s contents more appealing. A good example of this is the fruit and vegetable section. This is often very different to the other areas of the supermarket. It’s more the ’market’ designed and usually has more natural spot lights. In a short but interesting article on ’The Psychology behind Supermarkets’, Dr Harrison uses the term “psychological funnels” for aisle and how they prepare shoppers for what is at the end. This is a really interesting way to see this and think about how you can use this with interactive paths. In part you are setting up a reward status at the end through focusing.
Engaging the primitive
Most of the techniques used to sell to us are aimed directly at our basic instincts. They aren’t designed to get us thinking, they are designed to get us to not think and just purchase. It’s an unconscious drive that they are trying to cause. The state of ‘just doing’ is one that leads you to make the purchasing decisions they want. To buy the product they highlighted, to go down the aisles they want you to.
Out of the real world
How does this apply to digital interactions? Well you still have paths. One of the most important things you can do is to know your user paths. What journey are you taking them on? What funnels are you leading them down to get to which reward? You can also use things like positioning and highlighting.
A big thing you need to be careful of is to make something subtle enough to not cause friction. Humans don't do well with friction. If you think about herd mentality and what happens when something spooks the herd. Making something too obvious a herding technique and the herd will turn. The key is to make it natural and appear to be a choice. Whilst humans love to be guided, the idea that we aren't being unsettles us. It's when that idea is obvious we then loose faith, we refuse to bond or purchase as to us trust has been broken. That leads to all manner of seperation from the seller. As a result, often that can't be regained. This has happened with a lot of brands in the past.
It has to be noted that a lot of the methods used to make us purchase could be labelled questionable. However, it’s just like anything, also able to be used to avoid friction and help someone get to their purchasing choice. As with anything, it’s about using responsibly.
How we are guided to buying what we do I find really interesting. I thought I would share some further reading.
There is a book also called Buyology that I'm reading at the moment and recommend if nothing else for some eye opening reading. It’s a little bit wordy to get through but there are some really interesting insights hidden in those words.
Every open source project is made up of more than code. It’s more than pixels, more than binary. People create the code, craft the experience, test and support. Open source really is people source and the trouble is we keep forgetting that.
One of the biggest things you can do wrong when interacting with someone is assume anything you don’t know. If you don’t know their history, don’t assume. Don’t even think you can guess – because you probably can’t. Assumption is another word often for judgement and nobody likes that.
Learning to just see the human and not try and make up the extra parts is a constant life learning process. As humans, our brains try and fill in gaps. When written communication is our only format those gaps quickly become vast chasms of wrong.
Whilst we all may be cut from the same ancient genetic cloth to a variable percentage, that’s where the connection ends. I am not you, you are not me. We all travel this great adventure of life with different backpacks, we all take different paths. That’s part of the amazing that is the human race. The difficulties in trying to communicate with your polar opposite often becomes delight when you gain a different view through talking.
As the old idea goes, sometimes walking in someone else’s shoes means they fit better. In open source we should cherish the differences and protect them. Give space for everyone to be able to communicate. Some of us are shouters, some of us take a little time, some of us just need a bit of space for our voice to be heard. Giving that space for someone to be heard in their way, that is something we should all try and provide.
Impact of projects on lives
What we create has weight and impact on lives. This code, this non-existent digital flotsam. It has real physical and mental impact on real human lives. People feed their families with it. They have been enabled to make something that without projects they wouldn’t have. That’s kind of amazing to realise, but it’s also kind of deep to think about. Those interactions, the choices, they matter because of the impact on people's lives.
The human behind screen
Non-verbal communication online really isn’t great for remembering your interacting with a person. Sure, you have this tiny static avatar, but it’s too easy to get caught in your own head and not see the human your interacting with. Real time methods are a little better, but it’s all various degrees of numbing to the fact your interacting with a real human.
Remembering and not assuming is the only way projects get through ups and downs. Remembering the project is made of humans and not assuming anything about those humans. A culture where respect is given to all is a hard one to ensure, but it’s one worth striving for. A project that recognises the lives beyond commits are just as important.
When was the last time you said thank you to a core contributor? When did you say thanks to someone for silently manning the forums? Perhaps rather than focusing on #drama of any sort, thank someone. They don’t have to be only core either. Every open source project is deeper than those that have the ability to make a patch live. Recognising people rather than using a tag that just perpetuates the drama it points to, that’s a positive move in anyone’s book. In thanks, you are recognising a person. You are recognising that open source is made of people.
Next time you interact on Twitter or on trac, take a moment. Think about the person you are writing to. Maybe they’ve had a bad day, maybe they care about the thing you disagree with for a real reason. We all live complicated lives. When you respond, take a moment to really see the people, really understand that open source is about connections. You don't have to agree with everyone – nobody does. The point is how you disagree. Open source is about people joining together to create something amazing. Without people, there is no open source.