Guts from HERE.
- The underlying data structures should not define the UI. UI should not define underlying data structures.
- Good UI can use a transform to convert data structure into appropriate UI data.
- Make the next step obvious.
- Need must proceed Technology.
- Postpone platform choice until you know what you need to build. Start with real use cases. Think in flows, not in features.
- People must experience the UI in order to form an opinion about it. (Cannot just look at screenshots)
- Prototype often (and abandon prototypes often). Schedule prototypes for delivery in a sprint. It's an evaluation tool. Build them fast. Build quickly, checkout quickly and dispose of prototypes without regrets.
- Make prototypes simple (so they don't take long to do) and can be evaluated quickly.
- Simplify. Reduce the number of perceived things. Reduce visual clutter. (Cognitive load increases with each element on the screen.)
- User interface perception:
- negative shape and aesthetics (Emotional) - user identifies what is unpleasing and pleasing. user already has an idea if they will like it or not before they even use it.
- element parsing and counting (workload)
- use first element first (execute)
- Keep error messages in context. (see how the error messages are in close proximity to the field of entry)
- In touch interfaces, denote scrollable areas by clipping content.
- Leverage muscle memory and be consistent. (consistent layout even within sections)
- Think outside the page load. If you can do stuff in-place then do it. (minimize context shifts) Pagination by detecting scroll movement.
- Use transitions to change states.
- Iterate and refine.
- Find out what users like and dislike. (Have surveys, talk to users, build into application)
- Never break the user experience.
- Provide customer with a great experience. (Don't shut get the darned product shipped.)
Engineering UI: (ugly, blocks you from having a positive emotional item, lots of workload-may seem like a lot, ton of work for user, causes page abandonment)
Redesign of same page: same fields, broken into multiple steps, element parsing and counting (workload) is much lighter than previous. Notice how the field labels are light grey inside the field instead of a separate label.
Sunroof control screen in Tesla Model S (17" Touch Screen)
...can also drag on the sunroof on the screen:
