UI

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: