Coursera has been a great source of in-depth information regarding all aspects of the UX workflow. For help on creating wireframes/prototypes (wireframes inform prototypes), I recently learned about design principles from University of Minnesota and rapid prototyping from UCSD (U of Minn has great resources on prototyping also).
In the Prototyping and Design module offered by the University of Minnesota, week 2 focuses on design patterns and principles: flow and colors/consistency.
We learn a rule of thumb about matching our flow with how users normally read. In that way, we can predict and anticipate their eye movements and facilitate interaction. Most users not only read top to bottom and left to right, but they after the first screen full of going left to right, they tend to just stick to the left and go straight down quickly. We can take an Amazon product page which illustrates this concept. We start with the menu and move down the product image, move right to some details, and finish with details on buttons to make a purchase.
A good way to learn these rules of thumb is trying for the opposite, what is called counterfactual here. By seeing the difference, the benefits become clearer.
Another rule of thumb comes from geography, although it was thoroughly tested on cognitive interfaces (Montello 2003) also. Basically, objects that are closer are believed to be more similar that objects far away. On a map, this is like Japan and China vs one of them vs the US. On an interface, it’s like how bold and italics similarly act apple styles to characters while the alignment buttons further away position the paragraph. As this is what users expect, it’s good to create these groupings. To define groupings explicitly, a thin line is a good tool to separate nearby but different items. This rule of thumb is also explained in Gestalt psychology.
Colors are another factor. The main thing is that colors should be used consistently and signify certain meanings. On an election, red and blue should not be mixed and on Google, links and the URL should not use blue or green interchangeably. Furthermore, color alone is not a good differentiator as a significant portion of the population has difficulty distinguishing certain colors. As such, color should be employed, almost redundantly, to reinforce meanings.
When color has been chosen as the main marker, a good rule of thumb is to vary brightness to create different shades that are distinguishable even in grayscale. Consistent positioning like on traffic lights also works although this requires learning on the user’s part. Hashing through dots and lines can also be used to differentiate for color confusion.
Lastly, users have difficulty processing more than 7 things at a time, so it’s best to keep the amount of colors between 5 and 7 to not overload users.
In the Human-Centered Design: An Introduction module from University of California, San Diego, week 3 focuses on rapid prototyping.
Here, the professor talks about storyboards, paper prototyping, and mockups. Mockups should only be done at the end because they require lots of time for a product that still massively change due to their high fidelity and branding considerations.
Storyboards are great like user journeys to help others understand and to later remind them of why certain functions are of interest to users.
A key is that they convey ideas and do not include massive details that would tie designers to certain interfaces that may not be optimal. By providing the setting, they can illustrate the task and actions to get to satisfaction. A user journey may be more informative, but a storyboard could be a great way to getting to the user journey and also make sure a feature makes sense.
After the storyboard is produced, rapid paper prototypes* can be created to test with users. One should not focus too much on getting the buttons and dropdowns and content perfect because the key is making quick changes to react to the users’ behaviors.
The professor offers 6 tips to help with rapid paper prototyping:
- Make them loose and quick. Make photocopies of certain screens and buttons for quick reuse.
- Keep them together because it’s easy to lose pieces.
- When it’s hard to simulate on paper, making a drawing or just describe it out loud.
- Provide a background setting like a phone screen.
- Mix and match with already existing paper or digital assets
- Add specific context that users are familiar with like OS elements
*The University of Minnesota has a great video on paper prototyping that shows how post its and paper can make rather interactive prototypes.