'

UX Tools, Tips, and Tricks

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





Слайд 0

Presented by Katelyn Vermeyen, UX Designer – February 16th, 2015


Слайд 1

Usability heuristics Content guidelines Patient-facing interfaces Mobile vs. desktop design


Слайд 2

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


Слайд 4

Provide feedback for action in a reasonable amount of time.


Слайд 5

Provide feedback for action in a reasonable amount of time.


Слайд 6

Provide feedback for action in a reasonable amount of time. Color change: good Same verbiage: bad


Слайд 7

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

Use words, phrases & concepts familiar to the user. Register Sign In


Слайд 9

Use words, phrases & concepts familiar to the user. Register Different verbiage Sign In


Слайд 10

Use words, phrases & concepts familiar to the user. Register Different verbiage Different style Sign In


Слайд 11

Use words, phrases & concepts familiar to the user. Register Different verbiage Different style Different phrases Sign In


Слайд 12

Use words, phrases & concepts familiar to the user. Register Different verbiage Different style Different phrases Different syllables Sign In


Слайд 13

Clearly mark an “emergency exit” – support undo/redo. click to expand


Слайд 14

Clearly mark an “emergency exit” – support undo/redo. click to contract


Слайд 15

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


Слайд 16

Prevent problems from occurring with confirmation messages.


Слайд 17

Make objects & actions available. Instructions should be visible.


Слайд 18

Allow users to manipulate & personalize frequent actions.


Слайд 19

All information should be valuable and relevant.


Слайд 20

Error messages should be in plain language, indicate the problem, and constructively suggest a solution.


Слайд 21


Слайд 22

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


Слайд 23


Слайд 24

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


Слайд 25

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


Слайд 26

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


Слайд 27

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


Слайд 28


Слайд 29

Be aware of cognitive biases. Practice empathy. You are not your user.


Слайд 30

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

Name: Sam Age: 37 Occupation: Live musician


Слайд 32

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


Слайд 33


Слайд 34

“Mobile first” Mobile is under extreme space & content constraints. Constraints are good for design. Responsive design > Static design


Слайд 35


Слайд 36

Bigger touch points are generally better Leave enough space between touch points


Слайд 37

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


Слайд 38

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%


Слайд 39

More space = more whitespace not always white


Слайд 40

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


Слайд 41

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


Слайд 42

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


Слайд 43

• 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


Слайд 44


Слайд 45

• 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 • Something more specific? Ask me. • Katelyn.Vermeyen@iatric.com


Слайд 46


×

HTML:





Ссылка: