UX / UI
Have your cake and eat it
UX / UI What now?
UX stands for ‘User Experience’. In short, it’s the feel-good factor you get when browsing or working on a well thought-out website, it’s the design behind the design. It’s the whole cake eating experience.
UX specialists design the experience for the user and not just for aesthetics. For example, how many times have you tried to perform a task on your computer or phone and felt frustrated? Or tried a beautifully iced cake only to be disappointed by the cake itself?
UI stands for ‘User Interaction’ it is the application of the interaction design. Polishing, fine-tuning and bringing the product to life. Think of it as the icing on the cake, and more. It’s the icing, decoration, presentation and the eating. And because of the clever and thoughtful baking process, it feels free to stand out front and represent the entire cake because it knows it can rely on that to make the total eating experience a pleasant one.
The Internet is full of bad UX experiences and this is not because of neglect or malice on the part of website owners, it’s more to do the the nature of the medium, as constantly advancing technology can leave older websites behind, often way behind.
Enter the UX / UI ninja …
A well conducted UX / UI process can help improve the performance of your website, new or existing. It is not set in stone and most phases overlap somewhat, but this is generally how it goes:
Research & Discovery
Meet with the client to discuss business requirements. Establish ‘must have’ functionality and client wish lists. Research the customer group, establish what we already know & what we need to find out. Plan customer interviews & user testing to find the answers.
Information Architecture
Also known as Site Planning, this is drawing up the overall structure of the site to establish navigational strategies & menu structure. We may enlist the help of our users to find out what makes the most sense to them through card sorting and interviews. The techy part is deciding on data relationships and how the content will be set up in the database so that we can display it to the user in clear and clever ways, making it appear simple to the user.
Personas & Scenarios
Based on our research, we establish who will use the product, where, when and how will they use it. This helps to get into the heads of the customer to see how they might interact with the product developing a picture of the user (or users) to keep in mind through the design and development lifecycle.
Sketching & Wireframing
Where the fun begins. Drawing workflows and basic layouts to get a feel for how the site will look. Initially on white board and moving into Fireworks, I like to hash out my ideas and get casual user opinions. In the business, this is know as guerilla testing, but it’s plain old ‘what do you think of my drawings?’ over a cup of tea, to you and me.
Prototyping
Now for the excitement of bringing the wireframes to life. Usually by this stage the ‘wireframes’ are more ‘mockups’ and close to being the finished design. I think it’s better to prototype something as close to the end product as possible. This doesn’t mean jumping into coding just yet, there are lots of helpful resources out there for quick prototyping, which means we can test the product out with users before spending one iota of time on coding so we can quickly iterate and re-test until we’re happy to move onto the next stage.
Design & Coding
With our wireframes as a base, we can fine-tune the design. As I mentioned above, the finished design is almost there by the prototyping stage, so this is mostly polishing and fine-tuning. These days, thanks to the power CSS, there is no need to spend too much time tied up in Photoshop. I prefer to get the front-end coded up and work on fine-tuning the design directly in the browser.
Now, you have properly coded pages ready for the final round of pre-flight user testing. I say final round, but, if your budget allows, user testing and iterating should continue after the site goes live in response to live user feedback and behavioural information gathered from studying the analytics, seeing how people are actually interacting with your product.
If you build it, they will come — Teddy Roosevelt
…doesn’t apply here. Instead build the minimum viable product to entice users in, then fine-tune it based on their needs.
