Shift Remote FRONTEND: Smart Interface Design Patterns - Vitaly Friedman (Smashing Magazine)

Smart Interface
Design Patterns,
2020 Edition
Shift Remote Conference @ Live
Vitaly Friedman, July 7, 2020

↬ Julie Zhuo, https://medium.com/the-year-of-the-looking-glass/junior-designers-vs-senior-designers-fbe483d3b51e

↬ UI Design Tips,Tomáš Čakloš, https://www.smashingmagazine.com/2019/12/ui-design-tips-speed-up-workﬂow/

↬ Davide Scialpi, https://medium.com/@davidescialpi/branding-today-fashion-luxury-brands-look-all-the-same

↬ Ada case study, Daniel Diggle, Albion, https://www.danieldiggle.com/ada.php

↬ Menu Icons, Alex Münch, https://twitter.com/alexmuench/status/1090550334286692352

↬ Mind The Gap, Luke Wroblewski, https://youtu.be/mAiNdU1go1A

Perfect Mega Drop-Down
Interface Challenges
01 — Your goal is to expose a lot of content and navigation.
02 — Create a perfect drop-down for mobile (for The Guardian).
03 — Design the ﬁrst screen: all categories closed.
04 — Design the second screen: “Education” is open.
05 — You’ll need some sort of icon to indicate states.
06 — You have 10 minutes. Go!

split the screen in a half / no closind
needed to continue navigation

↬ Diagonal UI, Michael Oh, https://www.behance.net/gallery/12419409/VICE-VERSA-diagonal-UI-optimized-for-single-hand-IX

Video Player Checklist
Interface Challenges
01 — How do you design the thumb, the track, the controls?
02 — How do you display/hide controls, and when?
03 — How do you optimize for precise input and fast-forwards?
04 — How do you keep a slider easy to use on mobile?
05 — How do you design hover vs. tap interaction?
06 — How do you keep position ﬁxed on refresh?
07 — How do you link to speciﬁc parts of the video?
08 — Do we use preview clips, popularity bar, key moments preview?
09 — How do you deal with subtitles + lang, position, size, color?
10 — How do you design the scale of the slider?
11 — Is the UI and controls fully accessible?
12 — What happens if the video is outside of the view?

Navigation Design Checklist
01 — What critical navigation do we always need to expose (ﬁlters, cart, topics)?
02 — Are critical CTAs optimized for mobile (ﬂoat at the bottom)?
03 — Are critical CTAs optimized for desktop (upper right corner)?
04 — Do we always display search box to increase searches?
05 — Do we always display some navigation to raise engagement?
06 — Do we use “more/less” pattern to show/hide more navigation?
07 — Do we display breadcrumbs to jump to the parent category?
08 — Does tapping on a category’s title prompt accordion or navigation?
09 — Do drop-downs appear/disappear on hover, tap/click, or both?
10 — If drop-downs disappear automatically, when exactly it happens?
11 — If we use a hover delay in drop-downs, how long is it?
12 — If a search icon is used, how does search box appear when prompted?

13 — Do we list category’s main page in a drop-down?
14 — Do we place the “menu” button at the top or at the bottom?
15 — Can we push the “menu” down to make it reachable for thumbs?
16 — Do nav items appear in a full page/partial overlay or slide-in?
17 — Do we use a layered, “curtain” navigation for multiple levels?
18 — Do we absolutely need a deep nested navigation (>3 levels)?
19 — Have we considered using search with autocomplete instead?
20 — Do we use a tabbed navigation at the top or at the bottom (<5 items)?
21 — Do we use a ﬂoating navigation icon at the bottom right?
22 — Do we highlight popular or important navigation items?
23 — Do mega-drop-downs appear/disappear on hover, tap or both?
24 — Do we group mega-drop-down sections as cards/links on mobile?

25 — Do we use icons to display diﬀerences between sections?
26 — Can we split the nav vertically for sub-menus on mobile?
27 — Can users tap on the same spot to open/close navigation?
28 — Are all navigation options reachable via keyboard on desktop/mobile?
29 — Are all navigation options accessible via a screen reader?
30 — Have we minimized the distance/time to travel from one step to next?

Navigation
01 — First deﬁne priorities for navigation.
02 — Never hide critical navigation.
03 — Consider splitting nav vertically for sub-menus.
04 — You might not need more than 2 levels of navigation.
05 — Consider bottom tabs for important navigation.
06 — Turn breadcrumbs into ﬂoating buttons or text.
07 — Slide in navigation items with small navigation.
08 — Display as much as you can for rich navigation.
09 — Collapse navigation when it makes sense.
Summary

↬ Carousel, Jacky Gilbertson, https://dribbble.com/jackygilbertson

↬ Grønland – Color Picker Microinteraction, Mykolas Puodžiūnas
https://dribbble.com/shots/3202469-Gr-nland-Color-Picker-Microinteraction

Carousel Design Checklist
The Fundamentals
01 — Can we display slides instead of a carousel?
02 — How do we indicate current slide?
03 — Do we display a slice of upcoming slides?
04 — How do we indicate how many slides we have?
05 — What happens when user hovers over a slide?
06 — What happens when user hovers over the progress indicators?
07 — Do we support tap and swipe gestures on mobile?
08 — How many items do we display on mobile vs. desktop?
09 — Do we use auto-rotation, and how fast will it be?
10 — How do we choose the sequence of slides?
11 — How large will the carousel be on mobile vs. desktop?

↬ Carousel UX, Kyle Peatt, https://www.smashingmagazine.com/2015/02/carousel-usage-exploration-on-mobile-e-commerce-websites/

Carousel Design Checklist
Design Patterns
01 — Can we display slides instead of a carousel?
02 — How do we indicate current slide?
03 — Do we display a slice of upcoming slides?
04 — How do we indicate how many slides we have?
05 — What happens when user hovers over a slide?
06 — What happens when user hovers over the progress indicators?
07 — Do we support tap and swipe gestures on mobile?
08 — How many items do we display on mobile vs. desktop?
09 — Do we use auto-rotation, and how fast will it be?
10 — How do we choose the sequence of slides?
11 — How large will the carousel be on mobile vs. desktop?

Summary
Carousels
01 — Choose the sequence of slides carefully.
02 — Most important slides always come ﬁrst.
03 — Slides shouldn’t rotate too quickly (5–7s).
04 — Pause auto-rotation on hover, stop on interaction.
05 — Try to avoid auto-rotation on mobile.
06 — Always support swipe gestures on mobile.
07 — Always show a slice of the following slide.
08 — Auto-detect contrast for arrows/thumbnails.
09 — Provide information scent for available slides.
10 — Works best as an image gallery and on product pages.

Design Patterns
01 — Expose critical items and never hide critical navigation.
02 — Minimize the distance between the first/next actions.
03 — Design both mobile-first and desktop-first.
04 — Carousels aren’t good or bad; the context decides it.
05 — Make tappable areas large to avoid rage clicks.
06 — Include filters for price, rating, size, color, brand.
07 — For prices, allow to set a custom range.
08 — For ratings, provide decimal values and stars.
09 — Always display the count of items for each filter.
10 — Never block the UI; allow for multiple filters at once.
Summary

Shift Remote FRONTEND: Smart Interface Design Patterns - Vitaly Friedman (Smashing Magazine)

Recommended

More Related Content

What's hot (18)

Similar to Shift Remote FRONTEND: Smart Interface Design Patterns - Vitaly Friedman (Smashing Magazine) (20)

More from Shift Conference (20)

Recently uploaded (19)

Shift Remote FRONTEND: Smart Interface Design Patterns - Vitaly Friedman (Smashing Magazine)