Upload
kelly-mccann
View
215
Download
1
Embed Size (px)
Citation preview
Nifty UX Goodies
just a few takeaways
OverallIn order to advocate for your company/client, you must first advocate for their most critical, miserable, non-techy savvy user.
SO, put on your grumpy pants and honestly ask yourself:
Why should I care about this? What do I get within the first 3-5 seconds upon arriving on the page?
Do I have to think about what to do? If I do, am I (guided, intrigued, annoyed, delayed, entertained) in doing so?
Is it worth it to repeat that action?
What is the tone of this website? Does it match my motivation for being here?
Am I rewarded positively for my engagement?
OverallWhy should I care about this?
INCENTIVE Do I have to think about what to do?
INTUITION What is the tone of this website?
TONE Am I rewarded positively for my engagement?
POSITIVE FEEDBACK
IncentiveCalls to Action:
visually striking
brief
alluring
easy to find
the rest of the page is not overwhelming
the page should guide the user to the CTA
they should promise no obligation
encourage the user to act now
IncentiveCTAs can be simple further instruction to the user. Used tastefully, they should be received warmly, as they take the thinking out of the workflow for the user.
IntuitionA certain level of web-literacy and contextual understanding must be assumed depending upon your audience (bare minimum: they knew to navigate to your site).
Understanding the audience’s pre-established expectations and web literacy is the first step in designing a workflow.
IntuitionConsider existing knowledge when adding features
ex: Login is always on the top right
Zero-in on the perfect balance between simplicity and capability
ex: the iPad: high simplicity, limited capability. Know your audience and strive to accommodate accordingly
Progressively reveal features as the user explores
ex: filing taxes online
The user should always know where he/she is
ex: breadcrumbs, highlights on the navbar, etc.
User Status: loading %, page #, % completed, etc.
Transition animations
transition animations give the user context (ex, a horizontal flyout)
When things get tricky, minimalistic tours/tooltips are your friend.
Examples:
dropbox.com
evernote.com
TONEWhat is the feel of this website?
What do you/your client want it to be?
What tone will be most likely to cultivate interest, conversions, and/or continuous engagement with the target audience?
HINT: they aren’t always the same
The design must be congruent to the messaging. The design gives the user context for understanding the messaging.
Think: WRITTEN CONTENT : SPOKEN WORDS :: DESIGN CHOICES : BODY LANGUAGE
TONE
Keep in Mind:
Colors
fonts,
uppercase/lowercase/capitalize
sharp & rounded edges
animations & graphics
VOICE color
TONEFONTS
general trends:
Serif fonts – tradition, heritage, respectability and reliability
Modern fonts – strength, dependability, sophistication
Sans serif – cleanliness, simplicity, forward-thinking, reliability and honesty
Script – elegance, femininity and/or creativity
care must be taken to ensure legibility (not advised for main text)
Serif v. sans-serif:
Serif fonts are easier to read in printed works, but sans-serif are easier to read on the web because a screen has significantly lower resolution than books do.
CHECK OUT: http://www.webdesignerdepot.com/2013/03/serif-vs-sans-the-final-battle/?utm_source=CMblog&utm_medium=link&utm_campaign=InfographicsforDesign
On font sizing:http://www.smashingmagazine.com/2011/10/16-pixels-body-copy-anything-less-costly-mistake/
14px is standard, 16px is desirable:
Taking reading distance into account (a user is typically sitting 20-23in from his/her screen) 16px text on a screen is roughly the same size as text printed in a magazine or book, which are often set at ~10pt fonts.
Left: 16px text on a 24in screen, Right: 12pt text on a printed piece of paper
POSITIVE FEEDBACKThese are the extras that add reassurance to the user:
Responses to user interaction
Complements on the users’ journey
Confirmations
Feedback:
visual
audio
animated
POSITIVE FEEDBACK
SATISFYING INTERACTION: http://matthew.wagerfield.com/parallax/
Devices & Device SizesWearables, phones, fablets, tablets, laptops/desktops
low-end windows smartphone: ~480px; Mainstream large screens: ~1680px
Mind & account for differences in interaction using responsive design:
navigation features, swiping vs. clicking, scrolling (vert/horizontal, modular), differing use of margins/navbars/icongraphy
Trending Complaint:CMS’s like Wordpress & Squarespace are mainstream, allowing people access to semi-customizable templates.
Twitter Bootstrap offers easy-to-use components that works straight out of the box along with a readily accepted (and copied!) grid system
EVERYTHING LOOKS THE SAME! (some people are sayin’ it.
Stay creative! Like the old school: Space Jam website: http://www.warnerbros.com/archive/spacejam/movie/jam.htm