Please enable JavaScript.
Coggle requires JavaScript to display documents.
User Interface (UI) Design (principles (core principles (Efficiency…
User Interface (UI) Design
principles
core principles
Efficiency
About
Flexibility
About
Design something that looks good in all situations
responsive layouts
Consistency and structure
About
Clarity
About
Clarity goes side-by-side with simplicity
Familiarity
About
Our eyes love seeing simple and familiar things
new interface
fundamentals
5
Provide feedback
6
Be forgiving
4
Use visual hierarchy
Designers can create normalcy out of chaos; they can clearly communicate ideas through the organizing and manipulating of words and pictures.” – Jeffery Veen, The Art and Science of Web Design
rule
Design your interface in a way that allows the user to focus on what is most important
creating a clear path to understanding your interface
work together
size
color
placement of each element
7
Empower your user
3
Stay consistent
“
The more users’ expectations prove right, the more they will feel in control of the system and the more they will like it.
” – Jakob Nielson
rule
Your users need consistency
consistent interface
enables your users to have a better understanding of how things will work, increasing their efficiency
#
interfece elements (IE) that
need consistency
:
language
layout
design
8
Speak their language
If you think every pixel, every icon, every typeface matters, then you also need to believe every letter matters." - Getting Real
2
Pay attention to patterns
... UI Patterns
Facebook
MySpace
Blogger
Bank of America
9
Keep it simple
“A modern paradox is that it’s simpler to create complex interfaces because it’s so complex to simplify them.” – Pär Almqvist
1
Know your user
Obsess over customers: when given the choice between obsessing over competitors or customers, always obsess over customers. Start with customers and work backward
. - Jeff Bezos
user goals = yours goals
10
Keep moving forward
About
focus
on anticipating what users might need to do and ensuring that the interface has elements that are easy to access, understand, and use to facilitate those actions
brings together concepts
interaction design
visual design
information arhitecture
interface elements, IE
classification
Navigational components
breadcrumb
search field
slider
pagination
slider
tags
icons
informational components
progress bar
notifications
icons
message boxes
tooltips
modal windows
Input controls
radio buttons
dropdown lists
checkboxes
list boxes
text fields
buttons
rounded corners
are easier on the eyes
when we align cards in a row, it's easier to count the total number of cards
distinguishable edges on the corners of cards
guided our eyes to recognize the visual differences
toggles
date field
Containers
accordion
UI Design patterns
classification
Dealing with data
Tables
Formatting data
Images
Search
Social
Reputation
Social interactions
Navigation
tabs
Jumping in hierarchy
Menus
Content
Gestures
Onboarding
Guidance
Registration
Getting input
Forms
WYSIWYG
Explaining the process
Community driven
Miscellaneous
Shopping
Pricing table
shopping cart
Product page
coupon
Increasing frequency
Tip a friend