Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
User Experience
tools, tips, & tricks
Katelyn Caillouet
UX Designer, Organizer of District UX Book Club
@hellokatelyn
kate...
WHATWE WILL COVER
Usability heuristics Content guidelines
Delivering better feedback
Desktop vs. mobile designCreating per...
Usability Heuristics
Heuristic = an expert’s opinion on the best way to do something
Broad rule of thumb – not a specific ...
Jacob Nielsen’s
10 Usability Heuristics
1. VISIBILITY OF SYSTEM STATUS
Provide feedback for action in a reasonable amount of time.
1. VISIBILITY OF SYSTEM STATUS
Provide feedback for action in a reasonable amount of time.
1. VISIBILITY OF SYSTEM STATUS
Provide feedback for action in a reasonable amount of time.
Color change: good
Same verbiag...
1. VISIBILITY OF SYSTEM STATUS
Provide feedback for action in a reasonable amount of time.My suggestion: change to a check...
2. MATCH BETWEEN SYSTEM & REALWORLD
Use words, phrases & concepts familiar to the user.
Register Sign In
2. MATCH BETWEEN SYSTEM & REALWORLD
Use words, phrases & concepts familiar to the user.
Register Sign In
Different verbiage
2. MATCH BETWEEN SYSTEM & REALWORLD
Use words, phrases & concepts familiar to the user.
Register Sign In
Different verbiag...
2. MATCH BETWEEN SYSTEM & REALWORLD
Use words, phrases & concepts familiar to the user.
Register Sign In
Different verbiag...
2. MATCH BETWEEN SYSTEM & REALWORLD
Use words, phrases & concepts familiar to the user.
Register Sign In
Different verbiag...
3. User control & Freedom
Clearly mark an “emergency exit” – support undo/redo.
click to expand
3. User control & Freedom
Clearly mark an “emergency exit” – support undo/redo.
click to contract
4. CONSISTENCY & Standards
Don’t confuse your user – keep
words & actions consistent.
5. Error Prevention
Prevent problems from occurring with
confirmation messages.
6. RECOGNIZE RATHER THAN
RECALL
Make objects & actions available.
Instructions should be visible.
7. Flexibility & Efficiency of use
Allow users to manipulate & personalize frequent actions.
8. Aesthetic & Minimalist design
All information should be valuable and relevant.
9. Help users recognize, Diagnose &
Recover from errors
Error messages should be in plain language, indicate the
problem, ...
From Mail
Chimp
Voice & Tone
10. Help & Documentation
Any help information
should be easy to
search, focused, list
concrete steps, and not
be too large.
CONTENT
guidelines
CONTENT FIRST
Content is king.
Content is what users come for.
Content is what users want to access.
Design is nothing wit...
CONTENT FIRST
Content is king.
Content is what users come for.
Content is what users want to access.
Design is nothing wit...
CONTENT FIRST
People come for the content, but stay for good design.
Users are more likely to trust your content if it’s w...
CONTENT GUIDELINES
Clear & concise voice.
Keep it simple.
Make it useful.
An example of what not to do; vague, no
useful i...
CREATING
personas
EMPATHY IN User Interfaces
Be aware of cognitive biases.
Practice empathy.
You are not your user.
Personas
A way to empathize with and internalize the mindset of people
that will eventually use the software we design.
Ta...
Name: Sam
Age: 37
Occupation:
Live musician
Persona
• Tech-
connected
• On-the-go
lifestyle
• Dad
• Wants to
access health
info quickly &
efficiently
SAM, 37
• An internet retailer
• Wants a modern, minimalist, exclusive, luxury
vibe
• Targeting early 20’s-late 30’s fashion forwa...
TARGET USER: early 20’s-late 30’s fashion forward men & women
COME UPwith a Persona!
Name
Age
Occupation
Location
Attitude...
COME UPwith a Persona!
TARGET USER: early 20’s-late 30’s fashion forward men & women
What are your goals in designing for this target user?
What kind of experience do you need to create?
What kind of tone sh...
Example Goals (for our internet retailer)
1 2 3
The aesthetic should be
relaxing to the user and should
feel exclusive/hig...
Come upwith 3 goals for your site!
1 2 3
The aesthetic should be
relaxing to the user and should
feel exclusive/high-end, ...
Desktopvs. Mobile
different experiences
MOBILE vs. DESKTOP
“Mobile first” – “mobile only”
Mobile is under extreme space & content constraints.
Constraints are goo...
MOBILE First Process
MOBILE TOUCHPOINTS
Bigger touch points are generally better.
Leave enough space between touch points.
MOBILE TOUCHPOINTS
“designing for
thumbs”
Large smartphones
have taken over!
More on Luke W.
Burger bar – becoming
less common
If <5 options, avoid burger
bar
(more interaction with nav bar)
MOBILE MENUS
Redbooth re...
DESIGN Tips
More space = more whitespace
Use it well – let your elements
breathe
not always white
DESIGN Tips
More space = more whitespace
Don’t overwhelm user with too
much information
Use color to call out important
in...
DESKTOP DESIGN
More space = more whitespace
Don’t overwhelm user with too much information
DESKTOP DESIGN
More space = more whitespace
Don’t overwhelm user with too much information
call-to-action
whitespace
simpl...
Mobile DESIGN
Mobile DESIGN
call-to-action
simple navigation made
easy transition to mobile
simplified
recommendations
Let’s Make a sketch Prototype!
But I can’t
draw! If you can draw a line,
you can sketch a
prototype.
Let’s Make a sketch Prototype!
Delivering
better feedback
When your client gives the feedback, “I don’t like it.”
Like is nota part of the
criticalthinker’s
vocabulary.
- Erika Hall
Just Enough Research
But...we need to help Guide feedback
Give people time to look over your work.
But...we need to help Guide feedback
List specific goals you’re trying to meet.
1 2 3
The aesthetic should be
relaxing to ...
But...we need to help Guide feedback
List specific goals you’re trying to meet.
1 2 3
The aesthetic should be
relaxing to ...
But...we need to help Guide feedback
List specific goals you’re trying to meet.
1 2 3
The aesthetic should be
relaxing to ...
Try giving feedback!
Exchange a prototype with someone nearby.
Does the prototype achieve the goals he/she set? Is it on t...
To recap
• Keep content clear & simple
• Content first will save you time – press for more content
• Set constraints
• You...
RESOURCES FOR YOU
• User Onboard – a breakdown of how popular apps/site onboard
users
• Dribbble for design inspiration
• ...
UX in the DC community
UX in the DC community
Join our Slack channel!
Email districtux@gmail.com
Follow us on Twitter for book
club updates: @Dis...
questions?
Ask them now.
Thank you!
DC Web Women &
Code(Her) Attendees
Upcoming SlideShare
Loading in …5
×

MOBILE vs. DESKTOP “Mobile first” UX Tools, Tips & Tricks for Code(Her) Conference 2015

16,582 views

Published on

MOBILE vs. DESKTOP
“Mobile first” – “mobile only”
Mobile is under extreme space & content constraints.
Constraints are good for design.
Responsive design > Static design

Published in: Design
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF eBook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB eBook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc eBook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF eBook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB eBook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc eBook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, eBooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Visit this site: tinyurl.com/sexinarea and find sex in your area for one night)) You can find me on this site too)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • You can now be your own boss and get yourself a very generous daily income. START FREE...●●● http://ishbv.com/surveys6/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD FULL. BOOKS INTO AVAILABLE FORMAT, ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Natural enlargement book for free? [Download] Your natural enlargement blueprint. ●●● https://tinyurl.com/getpebible2019
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

×