This document provides tips for improving user experience (UX) on websites. It discusses the importance of incentivizing users, ensuring intuitiveness, establishing the right tone, and providing positive feedback. The key points are: 1) Users want to know "why should I care" and want guidance on what to do within the first 3-5 seconds. Calls to action should be visually striking, brief, and easy to find. 2) Design should align with users' expectations and abilities. Features should be progressively revealed as users explore. 3) Tone comes from design choices like colors, fonts, and animations, which should match the written content and messaging. 4) Positive feedback like visual

1. Nifty UX Goodies
just a few takeaways

2. Overall
In 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?

3. Overall
Why 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

4. Incentive
Calls 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

5. Incentive
CTAs 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.

6. Intuition
A 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.

7. Intuition
Consider 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

8. TONE
What 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

9. TONE
Keep in Mind:
Colors
fonts,
uppercase/lowercase/
capitalize
sharp & rounded edges
animations & graphics

10. VOICE color

11. TONE
FONTS
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

12. 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

13. POSITIVE FEEDBACK
These are the extras
that add reassurance
to the user:
Responses to user
interaction
Complements on
the users’ journey
Confirmations
Feedback:
visual
audio
animated

14. POSITIVE FEEDBACK
SATISFYING INTERACTION:
http://
matthew.wagerfield.com/
parallax/

15. Devices & Device Sizes
Wearables, 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

16. 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