UI Design

1. UI Design
 : provides an interface that allows users to accomplish their goals with the software, without unnecessary effort
 - UI has a major effect on the success or failure of software systems

http://searchmicroservices.techtarget.com/definition/user-interface-UI

2. UI - Different Layers
 1) The Surface Layer: finished visual design aspects
 2) The Skeleton Layer: screen layout and functional compartments on the screen
 3) The Structure Layer: navigation from one section to another section in the user interface
 4) The Scope Layer: built to support user tasks
 5) The Strategy Layer: incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well

3. General UI Design Principles
 1) Visibility of system status
 2) Match between system and the real world
 3) User control and freedom
 4) Consistency and standards
 5) Error prevention
 6) Recognition rather than recall
 7) Flexibility and efficiency of use
 8) Aesthetic and minimalist design
 9) Help users recognise, diagnose, and recover from errors
 10) Help and documentation

https://www.nngroup.com/articles/ten-usability-heuristics/

4. Usability vs. Utility
 - usability: does the system allow the user to learn and to use the raw capabilities easily?
  * Learnability
  * Efficiency of use
  * Error handling
  * Acceptability
 - utility: does the system provide the raw capabilities to allow the user to achieve their goal?

https://msdn.microsoft.com/en-us/library/ms997577.aspx

5. Usability Principles
 1) Do not rely on usability guidelines - always test with users
 2) Base UI designs on users' tasks
 3) Ensure that the sequences of actions to achieve a task are as simple as possible
 4) Ensure that the user always knows what he or she can and should do next
 5) Provide good feedback including  effective error messages
 6) Ensure that the user can always get out, go back or undo an action
 7) Ensure that response time is adequate
 8) Use understandable encoding techniques
 9) Ensure that the UI's appearance is uncluttered
 10) Consider the needs of different groups of users
 11) Provide all necessary help
 12) Be consistent

6. Wireframes
 - a schematic produced displaying
 - blueprint for layout, text and image placement, navigation components, colour scheme, and other web page components

https://webdesign.tutsplus.com/articles/a-beginners-guide-to-wireframing--webdesign-7399