Notes taken from / some contents directly copied from Invisionapp.com
Definition of 'User Interface'
Disciplines relevent to UI design
Think from the users' side
Core principles of UI design
1. Clarity: The user must be well-informed and confident based on simple design. At any place in your app, a few things should be perfectly clear to the user:
2. Flexibility: Design something that suits all the situations:
3. Familiarity: Use simple and familiar layout (icons, typography...). MUST be familiar to the user are:
4. Efficiency: Completion of the main task in the most fast, efficient, productive way
5. Consistency and structure: Consistency is a way to start feeling familiar about certain things, even if they were unknown before. Structure makes things more approachable, without feeling messy or overwhelming.
Other sources used
Definition of 'User Interface'
- The term User Interface (UI) was originally used for all kinds of human-machine interactions. But now, it almost in every cases means graphical user interface (GUI).
- User interface design (UID) or user interface engineering is the design of user interfaces for machines and software, such as computers, home appliances, mobile devices, and other electronic devices, with the focus on maximizing the user experience.
- UI design is also the design of software products which defines their structure, form, behavior, and visual style.
Disciplines relevent to UI design
- User experience (UX) design: The process of enhancing user satisfaction with a product by improving the usability, accessibility, and pleasure provided in the interaction with the product.
- Interaction design: Behaviour aspect of UX. What happens to a button when an user clicks on it? does the color/typography/anything else interact with the user's behaviour?
- Usability: Evaluation of easiness of using a product
- Information architecture: The structure and presentation of information.
- Visual design: the use of imagery, color, shapes, typography, and form to enhance usability and improve the user experience
Think from the users' side
- Users are the same people as we are. They get frustrated when something does not go well on the application. They may quit from the application when the UI is too confusing, and simply resort to using another similar kind. It's a must to remember this.
Core principles of UI design
1. Clarity: The user must be well-informed and confident based on simple design. At any place in your app, a few things should be perfectly clear to the user:
- What just happened
- Where you are
- What you can do
- What will happen when you do it
- What just happened, etc.—rinse and repeat
2. Flexibility: Design something that suits all the situations:
- Rely on traditional design solutions that work well in different situations (simple responsive layouts, less things stuffed in corners)
- Use bulletproof typography (black on white, large, readable, etc.)
- Think through all the possible content situations (no content, little content, ugly content, weird content). Sketch up the most important ones.
- Account for all the devices and resolutions
- Consider implications and flaws that can happen during the development process. Give additional cautionary comments.
3. Familiarity: Use simple and familiar layout (icons, typography...). MUST be familiar to the user are:
- Icons
- Navigation
- Calls to action
- Common color codes: Red for urgent, Green for done...
- Anything related to payment processing
4. Efficiency: Completion of the main task in the most fast, efficient, productive way
- Answer a question: what’s the most routine job that the user does on a daily basis? Is it content entry, editing, or viewing? Is it performing the same complex sequence of actions?
- Design the interface to make it most efficient: Measure the effort that's required to complete the task, like number of clicks, forms, and screens. Then clean up this sequence to make it streamlined. The core interface must be simple and functional.
5. Consistency and structure: Consistency is a way to start feeling familiar about certain things, even if they were unknown before. Structure makes things more approachable, without feeling messy or overwhelming.
- Introduce strong visual hierarchy, with the most important things big and bold
- Align everything nicely along the grid, or introduce any other kind of visual order
- Use a consistent color scheme throughout the app
- Keep the navigation consistent across all screens
- Re-use the same elements for different situations. For example, design a sample notification and color-code it for different situations.
Other sources used
- https://www.interaction-design.org
- https://www.usability.gov/what-and-why/index.html
- https://en.wikipedia.org/wiki/User_interface