nifty ux goodies - just a few takeaways
TRANSCRIPT
![Page 1: Nifty UX Goodies - just a few takeaways](https://reader033.vdocuments.mx/reader033/viewer/2022042707/58e5a7bf1a28ab05478b5b65/html5/thumbnails/1.jpg)
Nifty UX Goodies
just a few takeaways
![Page 2: Nifty UX Goodies - just a few takeaways](https://reader033.vdocuments.mx/reader033/viewer/2022042707/58e5a7bf1a28ab05478b5b65/html5/thumbnails/2.jpg)
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?
![Page 3: Nifty UX Goodies - just a few takeaways](https://reader033.vdocuments.mx/reader033/viewer/2022042707/58e5a7bf1a28ab05478b5b65/html5/thumbnails/3.jpg)
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
![Page 4: Nifty UX Goodies - just a few takeaways](https://reader033.vdocuments.mx/reader033/viewer/2022042707/58e5a7bf1a28ab05478b5b65/html5/thumbnails/4.jpg)
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
![Page 5: Nifty UX Goodies - just a few takeaways](https://reader033.vdocuments.mx/reader033/viewer/2022042707/58e5a7bf1a28ab05478b5b65/html5/thumbnails/5.jpg)
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.
![Page 6: Nifty UX Goodies - just a few takeaways](https://reader033.vdocuments.mx/reader033/viewer/2022042707/58e5a7bf1a28ab05478b5b65/html5/thumbnails/6.jpg)
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.
![Page 7: Nifty UX Goodies - just a few takeaways](https://reader033.vdocuments.mx/reader033/viewer/2022042707/58e5a7bf1a28ab05478b5b65/html5/thumbnails/7.jpg)
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
![Page 8: Nifty UX Goodies - just a few takeaways](https://reader033.vdocuments.mx/reader033/viewer/2022042707/58e5a7bf1a28ab05478b5b65/html5/thumbnails/8.jpg)
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
![Page 9: Nifty UX Goodies - just a few takeaways](https://reader033.vdocuments.mx/reader033/viewer/2022042707/58e5a7bf1a28ab05478b5b65/html5/thumbnails/9.jpg)
TONE
Keep in Mind:
Colors
fonts,
uppercase/lowercase/capitalize
sharp & rounded edges
animations & graphics
![Page 10: Nifty UX Goodies - just a few takeaways](https://reader033.vdocuments.mx/reader033/viewer/2022042707/58e5a7bf1a28ab05478b5b65/html5/thumbnails/10.jpg)
VOICE color
![Page 11: Nifty UX Goodies - just a few takeaways](https://reader033.vdocuments.mx/reader033/viewer/2022042707/58e5a7bf1a28ab05478b5b65/html5/thumbnails/11.jpg)
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
![Page 12: Nifty UX Goodies - just a few takeaways](https://reader033.vdocuments.mx/reader033/viewer/2022042707/58e5a7bf1a28ab05478b5b65/html5/thumbnails/12.jpg)
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
![Page 13: Nifty UX Goodies - just a few takeaways](https://reader033.vdocuments.mx/reader033/viewer/2022042707/58e5a7bf1a28ab05478b5b65/html5/thumbnails/13.jpg)
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
![Page 14: Nifty UX Goodies - just a few takeaways](https://reader033.vdocuments.mx/reader033/viewer/2022042707/58e5a7bf1a28ab05478b5b65/html5/thumbnails/14.jpg)
POSITIVE FEEDBACK
SATISFYING INTERACTION: http://matthew.wagerfield.com/parallax/
![Page 15: Nifty UX Goodies - just a few takeaways](https://reader033.vdocuments.mx/reader033/viewer/2022042707/58e5a7bf1a28ab05478b5b65/html5/thumbnails/15.jpg)
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
![Page 16: Nifty UX Goodies - just a few takeaways](https://reader033.vdocuments.mx/reader033/viewer/2022042707/58e5a7bf1a28ab05478b5b65/html5/thumbnails/16.jpg)
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