In his very interesting post, Johannes Thones, provides the
14 Golden Eggs of Good Design originating from Joe Nuxoll talk at Devoxx. Although, most of them are self explanatory, some of them (9, 10,11 and 12) are not so straight forward even for experienced developers. So just reposting the most interesting parts in IMHO :)
You can check his post for more extensively analysis.
- The underlying data structure should not define the user interface
- The interface should not define the data structure
- Need must proceed technology
- Start the process with real use cases
- Identify distinct categories of people that will use your app
- Think in flows not in features
- Prototype often. Abandom prototypes often
- Make the next step obvious
- Reduce the number of perceived things.To understand this, you have to understand how our brain works, when it perceives a user interface. There are always three phases:
- In the emotional phase, the brain recognizes colors, layouts and images on the screen. It sets the tone of the interaction with the UI.
- In the parsing phase, the brain figures out the purpose of every element on the screen. It prepares the user for the task.
- In the execute phase, the user starts to interact with the first element of the UI.
The more elements are on the screen, the more elements have to be parsed in the second phase. The more elements, the harder it is to understand for the user what he should do. The more elements, the more time the user needs, to understand the UI.
- Leverage muscle memory. Be consistent Our brain is a muscle. It can be trained. It reacts to common patterns. So make your UI consistent to use. Same things should always look the same. And they should align with the behavior the user expects from his operating system.
- Think outside the page load. If you can do stuff in-place. If you are inside the web, avoid complete page loads. Use the techniques offered by AJAX to load new elements or information in place. So the user does not have to re-parse all the elements because they are gone temporarily.
- Use transitions to change state. If your application changes the state, use simple transitions to make clear what is happening. For example, if you hide someting, fade it out so the user knows where to look if he wants to have it back.
- Iterate & Refine. Iterate & Refine
- Provide your customer with great experience.
You can check his post for more extensively analysis.
{{ parent.title || parent.header.title}}
{{ parent.tldr }}
{{ parent.linkDescription }}
{{ parent.urlSource.name }}