Let’s cram UI Design
Good luck!
Copyright By PowCoder代写 加微信 powcoder
1. UI Analysis – 0:40
TO DO: Put ourselves in the user’s shoes and examine good and bad web designs.
WHY: Understand how UI design can impact the user and get a feel for what a good design looks like.
2. Assessing our own UI – 8:00
TO DO: Ask ourselves user-focused questions as we design & develop our own user interfaces. WHY: Improve our UI and enhance our users’ experience (and get more marks!)
3. UI Extras (Optional) – 21:03
TO DO: Look at ways we can take our UI designs to another level. WHY: Go that extra mile in designing for our users <3
UI Analysis
LOOKING AT EXISTING UI DESIGNS
1. Sign in & learn about it - LinkedIn
2. Make a marketing poster - Canva
3. Find an answer to a question - Quora
4. Look for enrolment info - Yale School of Art, UNSW
How to use this video
ENJOY IT.. AND TAKE NOTES
User-Focused
We're going to practice putting ourselves in the users shoes and observe a few user interfaces.
Note down:
Any design strategies, things you've never thought about before, things that you want to remember.
WATCH VIDEO FOR WALKTHROUGH*
1.Sign in & learn about it - LinkedIn
2. Make a marketing poster - Canva
3. Find an answer to a question - Quora
4. Look for enrolment info - Yale School of Art, UNSW
Let's assess our own UI
DESIGN CHECKLIST
1. Visibility
2. Affordance
3. Feedback
4. Consistency
5. Constraints
6. Effectiveness & Utility 7. Efficiency
9. Learnability
10. Common Standards & Conventions 11. Catering to All
12. Aesthetics
How to use this video
... LIKE A CHEATSHEET
Assess your UI (or prototypes) by examining the different screens and ask yourself these questions.
Quick Tips
Some things to consider to improve the interface, according to that specific design principle or heuristic.
WATCH VIDEO FOR EXAMPLES*
Visibility
Does a first-time user need to guess or click on random things to figure out where the controls are?
Prioritise buttons > burger menus
Check difference screen dimensions and make sure controls don’t disappear
Make sure users know what page they’re on
If users are in the middle of a process, show them what step they’re on
Recognition Rather Than Recall – show users their choices rather than making them recall or guess an action.
To scroll or not to scroll?
How visible are the functions, options and
Affordance
Is it clear what each button does?
What hints are given that suggest how a control is supposed to be used?
If icons are used, is it intuitive or universal?
Links are often underlined
Links should be a different colour to normal text
Buttons are outlined or change style when hovered over
Icons often match real-world applications or the natural order of things
Once my user has completed an action, how do they know the system has acknowledged it?
When a user does something, give them feedback (E.g popup, success/failure message) For buttons or links, make it change colour once pressed
If the system is doing something in the background for a long time (>1.5 secs), show the user a loading message or spinning pinwheel
Consistency
Do different screens look the same?
Are buttons, controls, cards, etc. consistent and the same?
Is my colour scheme consistent throughout the application?
Ensure text has consistent fonts and sizes Stick to one font with different weights or styles – TWO if necessary
Controls should use the same styles
Often recommended to stick to two variations (primary, secondary)
Don’t implement jarring changes
Constraints
Am I limiting the errors my users can make by restricting controls?
Do users have access to controls they shouldn’t have permissions for?
If the user has an empty input, disable buttons to continue
If the user enters incorrect input (an invalid email, a taken username, a weak password), don’t let them complete the registration
If the user is not logged in, don’t show functions only registered users can do Minimise room for errors
Effectiveness & Utility
Can my users complete their tasks? Can they achieve their goals?
Make sure users can access all the controls they need – edit, delete, save, logout buttons For each checkpoint, understand the user’s goal and make sure the user can achieve it Navbars or navigation controls should be visible on all pages (some exceptions)
productivity?
Don’t make using your app tedious – limit and simplify steps as much as you can
Remove unnecessary steps
If multiple steps are required, show them their progress (progress bar, “Step 2/5”)
Can my user carry out tasks in minimal steps? Is my user able to maintain high levels of
Are my users protected from making errors?
Do I help them recover once an error has been made?
Do I help my user feel like they’re in control or that it’s safe to explore the interface?
If a user does something by accident, make sure they are able to undo it
If this isn’t possible then make sure warnings are provided for potentially dangerous actions (e.g delete, publish)
Don’t place buttons too close together If a user makes an error:
Step 1: Explain the error in plain language Step 2: Suggest a solution
Learnability
Is my application intuitive?
Do I provide instructions, tutorials or tips?
Use placeholders in inputs to demonstrate what the user should type
For complicated functions that might be unclear, tell the user what to do
Common Standards & Conventions
Is my interface somewhat familiar to the user?
User profile controls are usually in the top right corners
Clicking on the logo usually leads to the homepage
Symbols should match their real-world applications:
Magnifying glass – Search Shopping cart/basket – Purchases Heart or Like symbol
Floppy Disk – Save
Catering to All
Do I give new users enough support or instructions?
Am I slowing down my expert users?
Experts no longer need tips, tutorials, warnings, etc.
Give expert users options to turn off tutorials (e.g Do not show again)
Decide which functions are not absolutely necessary and can be moved into an ‘Advanced options’
Balance between learnability and efficiency Accessibility considerations: alternative text, ‘Easy Read’ option, captions, hierarchy
Aesthetics & Minimalism
Do I show only essential information/controls on a page?
Is there unnecessary clutter?
Ask yourself: ‘Is this information relevant now?’
Move rarely needed functions to another page (e.g Change username -> Settings)
Balance between minimalism and good visibility
Things to consider: Symmetry, Balance,
Contrast, Scale, Unity
Extra Stuff
SOME NICE ADDITIONS TO ENHANCE YOUR UI
Not super important
If you’re cramming the assignment feel free to stop watching.
Research & Take Notes
This is a brief overview. Do some further research on these concepts.
1. Dark Mode
2. Microinteractions
3. Designing for Emotions 4. Cognitive Load
Microinteractions
Designing for Emotions
Cognitive Load
程序代写 CS代考 加微信: powcoder QQ: 1823890830 Email: powcoder@163.com