'

UX Tools, Tips & Tricks

Понравилась презентация – покажи это...





Слайд 0

User Experience tools, tips, & tricks Katelyn Caillouet UX Designer, Organizer of District UX Book Club @hellokatelyn katelyncaillouet@gmail.com


Слайд 1

WHAT WE WILL COVER Usability heuristics Creating personas Content guidelines Desktop vs. mobile design Delivering better feedback


Слайд 2

Usability Heuristics Heuristic = an expert’s opinion on the best way to do something Broad rule of thumb – not a specific guideline Jacob Nielsen’s 10 usability heuristics for UI design


Слайд 3

Jacob Nielsen’s 10 Usability Heuristics


Слайд 4

1. VISIBILITY OF SYSTEM STATUS Provide feedback for action in a reasonable amount of time.


Слайд 5

1. VISIBILITY OF SYSTEM STATUS Provide feedback for action in a reasonable amount of time.


Слайд 6

1. VISIBILITY OF SYSTEM STATUS Provide feedback for action in a reasonable amount of time. Color change: good Same verbiage: bad


Слайд 7

1. VISIBILITY OF SYSTEM STATUS My suggestion: change to a check Provide feedback for action in a reasonable amount of time. mark icon for the terms “remind me” Or keeping star icon, change to term to favorite and store “favorites” on a separate page.


Слайд 8

2. MATCH BETWEEN SYSTEM & REAL WORLD Use words, phrases & concepts familiar to the user. Register Sign In


Слайд 9

2. MATCH BETWEEN SYSTEM & REAL WORLD Use words, phrases & concepts familiar to the user. Register Different verbiage Sign In


Слайд 10

2. MATCH BETWEEN SYSTEM & REAL WORLD Use words, phrases & concepts familiar to the user. Register Different verbiage Different style Sign In


Слайд 11

2. MATCH BETWEEN SYSTEM & REAL WORLD Use words, phrases & concepts familiar to the user. Register Different verbiage Different style Different phrases Sign In


Слайд 12

2. MATCH BETWEEN SYSTEM & REAL WORLD Use words, phrases & concepts familiar to the user. Register Different verbiage Different style Different phrases Different syllables Sign In


Слайд 13

3. User control & Freedom Clearly mark an “emergency exit” – support undo/redo. click to expand


Слайд 14

3. User control & Freedom Clearly mark an “emergency exit” – support undo/redo. click to contract


Слайд 15

4. CONSISTENCY & Standards Don’t confuse your user – keep words & actions consistent.


Слайд 16

5. Error Prevention Prevent problems from occurring with confirmation messages.


Слайд 17

6. RECOGNIZE RATHER THAN RECALL Make objects & actions available. Instructions should be visible.


Слайд 18

7. Flexibility & Efficiency of use Allow users to manipulate & personalize frequent actions.


Слайд 19

8. Aesthetic & Minimalist design All information should be valuable and relevant.


Слайд 20

9. Help users recognize, Diagnose & Recover from errors Error messages should be in plain language, indicate the problem, and constructively suggest a solution. Sure. NOPE.


Слайд 21

From Mail Chimp Voice & Tone


Слайд 22

10. Help & Documentation Any help information should be easy to search, focused, list concrete steps, and not be too large.


Слайд 23

CONTENT guidelines


Слайд 24

CONTENT FIRST Content is king. Content is what users come for. Content is what users want to access. Design is nothing without content.


Слайд 25

CONTENT FIRST Content is king. Content is what users come for. Content is what users want to access. Design is nothing without content.


Слайд 26

CONTENT FIRST People come for the content, but stay for good design. Users are more likely to trust your content if it’s well-designed.


Слайд 27

CONTENT GUIDELINES Clear & concise voice. Keep it simple. Make it useful. An example of what not to do; vague, no useful information, and annoying.


Слайд 28

CREATING personas


Слайд 29

EMPATHY IN User Interfaces Be aware of cognitive biases. Practice empathy. You are not your user.


Слайд 30

Personas A way to empathize with and internalize the mindset of people that will eventually use the software we design. Take a walk in your users’ shoes. More than one persona is best – try 3-4 (depending on project scope)


Слайд 31

Persona Name: Sam Age: 37 Occupation: Live musician


Слайд 32

SAM, 37 • Techconnected • On-the-go lifestyle • Dad • Wants to access health info quickly & efficiently


Слайд 33

We’re designing FoR... • An internet retailer • Wants a modern, minimalist, exclusive, luxury vibe • Targeting early 20’s-late 30’s fashion forward men & women


Слайд 34

COME UP with a Persona! TARGET USER: early 20’s-late 30’s fashion forward men & women Name Age Occupation Location Attitudes Values Skills Behaviors Goals Needs


Слайд 35

COME UP with a Persona! TARGET USER: early 20’s-late 30’s fashion forward men & women


Слайд 36

Now that you have a persona... What are your goals in designing for this target user? What kind of experience do you need to create? What kind of tone should your content have?


Слайд 37

Example Goals (for our internet retailer) 1 2 The aesthetic should be relaxing to the user and should feel exclusive/high-end, like shopping in a luxury store. The “Buy Now” call-to-action button needs to stand out most on the page. 3 Content on the page should reflect the high-end aesthetic we are trying to achieve.


Слайд 38

Come up with 3 goals for your site! 1 2 The aesthetic should be relaxing to the user and should feel exclusive/high-end, like shopping in a luxury store. The “Buy Now” call-to-action button needs to stand out most on the page. 3 Content on the page should reflect the high-end aesthetic we are trying to achieve.


Слайд 39

Desktop vs. Mobile different experiences


Слайд 40

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


Слайд 41

MOBILE First Process


Слайд 42

MOBILE TOUCHPOINTS Bigger touch points are generally better. Leave enough space between touch points.


Слайд 43

MOBILE TOUCHPOINTS “designing for thumbs” Large smartphones have taken over! More on Luke W.


Слайд 44

MOBILE MENUS Burger bar – becoming less common If <5 options, avoid burger bar (more interaction with nav bar) Redbooth removed their burger menu out & saw session time jump 70%


Слайд 45

DESIGN Tips More space = more whitespace not always white Use it well – let your elements breathe


Слайд 46

DESIGN Tips More space = more whitespace Don’t overwhelm user with too much information Use color to call out important information (“call to action”)


Слайд 47

DESKTOP DESIGN More space = more whitespace Don’t overwhelm user with too much information


Слайд 48

DESKTOP DESIGN simple navigation More space = more whitespace call-to-action Don’t overwhelm user with too much information whitespace recommendations (less important) below


Слайд 49

Mobile DESIGN


Слайд 50

Mobile DESIGN simple navigation made easy transition to mobile call-to-action simplified recommendations


Слайд 51

Let’s Make a sketch Prototype! But I can’t draw! If you can draw a line, you can sketch a prototype.


Слайд 52

Let’s Make a sketch Prototype!


Слайд 53

Delivering better feedback


Слайд 54

When your client gives the feedback, “I don’t like it.”


Слайд 55

Like is not a part of the critical thinker’s vocabulary. - Erika Hall Just Enough Research


Слайд 56

But...we need to help Guide feedback Give people time to look over your work.


Слайд 57

But...we need to help Guide feedback List specific goals you’re trying to meet. 1 2 The aesthetic should be relaxing to the user and should feel exclusive/high-end, like shopping in a luxury store. The “Buy Now” call-to-action button needs to stand out most on the page. 3 Content on the page should reflect the high-end aesthetic we are trying to achieve.


Слайд 58

But...we need to help Guide feedback List specific goals you’re trying to meet. 1 2 The aesthetic should be relaxing to the user and should feel exclusive/high-end, like shopping in a luxury store. The “Buy Now” call-to-action button needs to stand out most on the page. 3 Content on the page should reflect the high-end aesthetic we are trying to achieve.


Слайд 59

But...we need to help Guide feedback List specific goals you’re trying to meet. 1 2 The aesthetic should be relaxing to the user and should feel exclusive/high-end, like shopping in a luxury store. The “Buy Now” call-to-action button needs to stand out most on the page. 3 Content on the page should reflect the high-end aesthetic we are trying to achieve.


Слайд 60

Try giving feedback! Exchange a prototype with someone nearby. Does the prototype achieve the goals he/she set? Is it on the right track?


Слайд 61

To recap • Keep content clear & simple • Content first will save you time – press for more content • Set constraints • You are not your user – practice empathy with personas • Utilize white space • Use color to encourage actions


Слайд 62

RESOURCES FOR YOU • User Onboard – a breakdown of how popular apps/site onboard users • Dribbble for design inspiration • Persona – a photography project that’s helpful for developing personas • A Book Apart series if you want some easy reading • Design Review Podcast – UX principles applied to a UI review


Слайд 63

UX in the DC community


Слайд 64

UX in the DC community Join our Slack channel! Email districtux@gmail.com Follow us on Twitter for book club updates: @DistrictUX Join us once a month at TrackMaven for our events!


Слайд 65

questions? Ask them now.


Слайд 66

Thank you! DC Web Women & Code(Her) Attendees


Слайд 67


×

HTML:





Ссылка: