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