Tampa Bay UX - Scary UI 2

transcript

SCARY UI 2

AHH!!!

NO! Anything

but that!!

KEEP AWAY!!!

MORE CHILLING UX TALES FROM AROUND THE INTERWEBS

AND….GO!

INTERFACES HAVE AFFORDANCE!

AFFORDANCE! HANDLES ARE FOR PULLING, FLAT PANELS ARE FOR PUSHING. THE CONTROL SHOULD AFFORD HOW IT SHOULD BE INTERACTED WITH

UH, DO WHAT NOW?! PLEASE DON’T MAKE ME USE THIS!

CLASSIC EXAMPLE OF NOT ENOUGH ON THE PAGE

SCARY MOBILE UI

Many images from a blog post by Theresa Neil -

https://theresaneil.wordpress.com/2011/08/22/bad-mobile-apps-ui-design-gone-wrong/7

The screen is small. Your fingers are big. You are constantly distracted.

Its quite easy to provide UI that is extremely scary (and unusable)

SCARY ERROR MESSAGES

Huh? Thanks for the SUPER helpful message.

AIRPORT WIFI LOGINS. LOTS OF TEXT AND SMALL LINKS! YAY!

YOUTUBE, WHERE IS THE SEARCH LINK OR ICON?!

OH. I HAD TO RE-DOWNLOAD THE APP TO GET IT.

INTERACTION SHOULD MATCH BEHAVIOR!

Typical swipe left gesture on a list is the card (or list item) moves left to reveal options underneath it. Here, Google broke that and on left swipe has a little button appear. It feels very awkward.

INTERACTION SHOULD MATCH BEHAVIOR!

Here is the standard way to expose options on left swipe of a card or list item.

YOWZA!

I think my icon library threw up on the screen.

UHH…{SHRUG} NEXT APP!

Don’t make me think. please. If a user wants to solve puzzles, they will get a puzzle app.

* See Steve Krug’s book

ALL THE OPTIONS!

Why group things? A long list is fine.

1. COMIC SANS FTW. 2. SEE LUKEW FOR FORM DESIGN

DON’T ALWAYS COPY APPLE. CONTEXT IS VERY IMPORTANT

Google introduced, for just one day, a totally crazy Apple OS X style dock above the search bar.

Ugly icons, architectural mess, lack of connection to any use case. Dropped in less than 24 hours.

GAUGES ARE FUN!

I guess a finance degree will help you understand this.

Also, green is overused. Lets use blue for ‘good’.

MOTIONX SICKNESS

ooh, it reminds me of the old iPod!

Standard controls decrease cognitive load and allow for faster task time.

EXEC SAID HE WANTED BAR CHARTS…

AHH, SPACE FOR THE EYE TO REST…

And time for the brain to sit and wonder what to do next.

If the point of this view is to log in, where is the form?? why a big blank sky??

CONTRAST IS GOOD.

white on light blue is kinda hard to read. Increased cognitive barriers == decreased usability

A BIT OVERDESIGNED

skeuomorphism at its finest. or worst.

On/off switches need figuring out. do they relate to the lights next to them?

FLAG ON THE PLAY! BACKGROUND IMAGE INTERFERENCE.

WHAT ARE THOSE ICONS?

do they need to be shown on every row?

SMALL, MEDIUM, LARGE ARE DETAILS?

Sometimes you need details vs subjective relative labels.

SCARY MOBILE UI

Many of the app images from a blog post by Theresa Neil -

https://theresaneil.wordpress.com/2011/08/22/bad-mobile-apps-ui-design-gone-wrong/28

The screen is small. Your fingers are big. You are busy and distracted.

Spend EXTRA time on usability research and testing

CRUELEST OPT OUTS

Why make your user feel good when you can shame them into behaving how you want?!

CRUELEST OPT OUTS

http://cruelestoptouts.tumblr.com/?utm_campaign=UX_Design_Weekly_Issue_57&utm_medium=email&utm_source=uxdesignweekly.com

10 WORST DESIGN FAILURES OF ALL TIME

http://studio.uxpin.com/blog/10-worst-design-failures-of-all-times/ 35

BEWARE OF GOBLINS IN PRINCESS DRESSES

Design vs. Usability

“Hey! That looks cool!”Be cautious about following a trend.

Favourite Website Awards

gomacro.com

“Hey! That looks cool!”Be cautious about following a trend.

5 seconds: Wow! I love the colors here and this background!

10 seconds: Woah - this slider is moving away to fast - I can’t read it.

40 seconds: This navigation makes no sense. It is color coded but I am looking for a coconut bar and thought that would be under the brown tab - I had to check each tab and found it under the blue tab.

90 seconds: When I put the bar in the cart it takes me to the general shopping page so I have to locate the bar all over again. ARGH! This isn’t worth it….

Interaction CostReadingLookingScrollingClickingTyping

Reduce interaction cost to increase usability

Mobile’s Influence on Design.

Mobile Influences Design

• Less clutter

• Larger everything (including text)

• Mobile-optimized navigation

• Minimalism

BIG Hero.

BIG Hero Don’t forget to welcome your visitors and tell them who you are

“There is a pretty girl so….is it a fashion website?”

Avoid the False Floor Let users know there is more content below

BIG Hero Solutions

Polygons, Angles & Circles.

Polygons are HOT!Use them regularly

Use Angles to break the false floorIrregular angles and shallow angles cause motion sickness

Circles are great to add focusUse them with objects that are naturally round

Ghost Buttons

Ghost Buttons Increase Interaction Cost

Hidden Content

Hiding Content Increases Interaction Cost

Navigation.

Navigation Solution One trend to avoid — the hamburger menu

Navigation Solution Trendsetters using the hamburger on desktop have now gone

back to more discoverable methods.

UX RecommendationHamburger menu OK for mobile in most situations (consider your audience)

Should avoid using on desktop

Can use in responsive after certain breakpoints

“Menu” label should always accompany icon

WORST CASE UX FAIL.. ☹

90https://medium.com/@designuxui/how-bad-ux-killed-jenny-ef915419879e

• Its not just bad visual design and bad UI, its workflow, page flow, alerts, usability!

EMPLOYEES ARE PEOPLE TOO!

LET THE PAIN STOP!

How much time are employees wasting trying to use the tool, then complaining about the tool?

Do you want your employees frustrated and angry at work?

THEN AND NOW

How has design changed since the beginning of the web?

AMAZON, THEN AND NOW

YAHOO, THEN(1994) AND NOW

APPLE, THEN(1997) AND NOW

TWITTER, THEN AND NOW

• Simpler design • Clearer calls to action • Visual to show the product in

action • Better logo ;)

SOME UX REFERENCES

http://faculty.washington.edu/jtenenbg/courses/360/f04/sessions/schneidermanGoldenRules.html

http://www.uie.com/

http://boxesandarrows.com/

http://ui-patterns.com/

http://www.nngroup.com/articles/ten-usability-heuristics/

http://uxpin.com/

SOME UX REFERENCES (CONT)

http://developer.android.com/design/get-started/creative-vision.html

https://developer.yahoo.com/ypatterns/

http://www.userfocus.co.uk/index.html

http://www.usertesting.com/

http://rosenfeldmedia.com/

http://www.amazon.com/Things-Designer-People-Voices-Matter/dp/0321767535/ref=pd_sim_b_1?ie=UTF8&refRID=0JEFF7Z3XRDVQJFZBDQS

http://www.amazon.com/Dont-Make-Think-Revisited-Usability/dp/0321965515/ref=pd_bxgy_b_img_y

http://www.optimalworkshop.com/

SOME UX REFERENCES (CONT)

SILENCE THE SCREAMS.

DON’T LET SCARY UI HAPPEN TO YOUR USERS!

Happy Halloween!

IMAGES FROM SCARY UI 1!

FOR THIS FIRST USER TEST…DON’T CRASH THE PLANE.

ALL THE FEATURES AND SETTINGS!!

CLICK WHAT TO WHAT NOW?

If your buttons need instructions, relabel your buttons. (even if it means custom code)

HOW MANY BUTTONS DOES YOUR TOILET HAVE?

COMPARISON TABLE – NOT SO GOOD

• Too much text. • No clear column

headers • Contrast between

alt row bg color and copy not high enough.

• Full borders add clutter

• Overall: blah

http://www.regions.com/personal_banking/savings_cds.rf

COMPARISON TABLE – MUCH BETTER

• Clear column headers

• Clear y axis labels • High contrast on all

rows between copy and bg color

• Clearly delineated sections

• Easy to scan

http://www.firehost.com/compare

LOOKS GOOD, BUT IMAGERY TOO BIG!

• Clearly designed for large monitors

• The main task users have is to search for flights, and that form is hidden.

http://www.southwest.com

“PARALLAX” (NOT THE GREEN LANTERN VILLAIN)

• Numbered navigation? • CTA to ‘Scroll down’ instead

of “next” or “continue” ? • Navigation is clickable and

has flyouts? • How do you visually know

there is more content? Section padding is HUGE

• Scroll Down CTAs jump around so you have to keep moving your mouse left and right. Keep them centered

Visually okay, but…

https://www.verizon.com/foryourhome/myaccount/ngen/upr/splash/myvzlearn.aspx

BETTER PARALLAX

• Clear that there is more content down below

• ‘more content’ CTA (v) is centered and pointing to more content

• More true parallax since background imagery scrolls at different speeds

https://www.spotify.com/us/

GREAT PARALLAX

• Clear that there is more content down below

• ‘more content’ CTA _v_ is centered and pointing to more content

• More true parallax since background imagery scrolls at different speeds

• Navigation/progress indicator on side shows you where you are and lets you click to jump navigate

http://discover.store.sony.com/be-moved/

SCARY PARALLAX! (THE GREEN LANTERN VILLAIN)

NICE DESIGN (HAD TO SHOW APPLE. NOT PARALLAX PER SE)

115http://www.apple.com/iphone-6/

CAROUSELS. GREAT RIGHT?!

116http://shouldiuseacarousel.com/

HOVER NAV. CONTROL YOUR FLYOUTS!

117http://www.carmax.com/

• onMouseover = BAD. Instant and annoying

HOVER NAV. MORE CONTROL OVER YOUR FLYOUTS

118http://www.ally.com/

• onHoverIntent! Quick mouseover does not trigger the flyout. Only show flyouts if user actually intends to stop their mouse and wait for a navigation dropdown. NOT annoying!

http://cherne.net/brian/resources/jquery.hoverIntent.html

HUMOR BREAK!

FITTS’S LAW

120http://www.flvs.net/Pages/default.aspx

• Click ‘login’. What happened? New page? Where is login?

Fitts's law (often cited as Fitts' law) is a model of human movement …that predicts that the time required to rapidly move to a target area is a function of the distance to the target and the size of the target. --http://en.wikipedia.org/wiki/Fitts's_law

So, put things closer together if they’re related!

PUT THE DESIRED THING NEAR WHERE USER HAS TO CLICK/TAP

LONG FORMS…{YAWN}…ABANDON

• 1 long form. • No indication of length. No

indication of progress as you fill it out (other than scrollbar size)

http://www.rkk.com/long-application-form/application/long

FORMS DONE RIGHT WITH CHUNKING, ORGANIZATION, PROGRESS INDICATOR, PROGRESSIVE DISCLOSURE

• Progress indicator • You know generally how long (how many

steps there are) • Sections are chunked appropriately

SCHOOL WEBSITES ARE NOTORIOUSLY BAD (NO FUNDING)

• Taxonomy is poor: “whats a program?” OH, my kid’s classes. why not call it classes or at least ‘subjects’

• Underlining is not enough to denote ‘clickability’, make the hyperlinks blue

• What are those icons? AA? That’s not universal. “ICONS ARE AMBIGUOUS” • Why is “select teachers to email” label above the “not graded” column? • Column headers would help: “Class | Status | Teacher” or “Class | Teacher | Status”

• Too many boxes!

DON’T DESTROY YOUR LAYOUT!

• The pattern for emailing teachers is SO poor here. The form shows up in the content and

smashes the list view left ,making it illegible. • When you click checkboxes next to email addresses, there is no feedback to user that your

email will actually go to those people (UI needs feedback when user interacts!) I am not

confident as a user, the system is working right.

• Is there even a strong use case for emailing multiple teachers at a time?

CAN BE CLEANED UP BY USING STANDARDS AND INDUSTRY RECOGNIZED PATTERNS