Basic Principles
Usability
User experience is more than usability:
- Usability: does it meet user requirements?
- Efficiency: how fast is it use? How many clicks does it require
- Satisfactory: is it simple and elegant to use
Have empathy:
- Put yourself in your users’ shoes
- What prior knowledge do they have? What is their target knowledge?
- Understand their frustrations and desires
Design makes a difference; two identically-capable websites will be distinguished by their UI
User Experience Honeycomb
Useful: is your interface serving a purpose?
Usable: is it easy to learn and use? Is the learning curve short?
Findable: can users find what they are searching for?
Credible: is the company and product trustworthy?
Accessible: is it accessible to disabled people? Aria labels, contrast, font size etc.
Desirable: does the UI look good and make it easy to use?
If it has all six, then your application has value.
What Makes a Great UX?
Not Just Style Sheets
Simplicity: do not overload the UI; white space is important
Consistency: consistent behavior (e.g. button and links have consistent behavior) and styling (colors, page layout, button names)
Dual coding: use icons and labels; just icons makes it accessible only to expert users
Don’t annoy the user: avoid video autoplay, pop-ups
Content
Appropriate content:
- Avoid long pages; infinite scrolling not suitable for all purposes
- Expired or messy information great for scaring users
- Use interactive content and infographics; just text is boring
Keep users informed:
- Give appropriate feedback (e.g. success/error messages)
- Show action progress if it is expected to take a noticeable amount of time
- Modals visually break the ‘normal’ flow; use only for critical information
UX Tools
Input controls:
- Text/pre-formatted fields
- Toggle/sliders buttons, checkboxes, radios
- Dropdowns
Navigational components: Design navigational components for your purpose; don’t just plonk it on there
If a user doesn’t understand how the navigation works, they will just leave
- Breadcrumbs
- Search fields
- Pagination
- Hyperlinks (not too many)
Information components:
- Tooltips, icons, progress bars
- Message boxes, notifications, modal windows
Plus containers - accordions, tables, tabs etc.
Infographics
- Decide what data you want to show: What do you want to tell; to whom?
- Recognize the potential of the information - its essence
- Explore possibilities; rapid hand-drawn sketches
- Choose, then create a wireframe/mock-up of your concept
- Test with users; ask specific questions about the data, not just ‘does it look good’
- Draw shapes and add interactivity if possible (e.g. buttons, animations)
- Decide on typography, taking into account readability and the visual identity
Semiology of Graphics
Visual Variables
- Size
- Shape
- Color:
- Hue
- Value
- Saturation
Misc:
- Use whitespace; a simpler design emphasizes the elements that exist
- Think responsiveness
- Avoid large banners; they take up a lot more space on mobile
Test Test Test
Wireframes: low-fidelity sketch; flow between screens. Be extra careful who you engage with; if you show the wireframes, everyone and their dog will have different nitpicks and complaints.
Mock-ups: high-fidelity representations based off of the wireframes; no interactivity. Focus on the visual identify.
Prototype: limited functional implementation (e.g. mocking) but with a functioning workflow. Concentrate on visual behavior, risky features.