111
Steve MacKley Beaconfire

SXSWUI15 UI Patterns: Then & Now

Embed Size (px)

Citation preview

Page 1: SXSWUI15  UI Patterns: Then & Now

Steve MacKleyBeaconfire

Page 2: SXSWUI15  UI Patterns: Then & Now
Page 3: SXSWUI15  UI Patterns: Then & Now
Page 4: SXSWUI15  UI Patterns: Then & Now
Page 5: SXSWUI15  UI Patterns: Then & Now

I don’t really care, one way or the other

Page 6: SXSWUI15  UI Patterns: Then & Now

1. Information architecture defines the structure of the content.

2. Interaction design lets people manipulate and contribute to that information.

3. Visual design communicates these possibilities to people.

Source: http://www.freshtilledsoil.com/what-is-user-interface-design/

Page 7: SXSWUI15  UI Patterns: Then & Now

Image: http://keyezer.com/old-school-vs-new-school/

Page 8: SXSWUI15  UI Patterns: Then & Now
Page 9: SXSWUI15  UI Patterns: Then & Now

• 2005, The Zen of CSS Design was

published by Dave Shea and web

designer Molly Holzschlag.

• The book is based on 36 designs

featured at the Zen Garden site

• The goal was/is to showcase what

is possible with CSS-based design

Page 10: SXSWUI15  UI Patterns: Then & Now
Page 11: SXSWUI15  UI Patterns: Then & Now
Page 12: SXSWUI15  UI Patterns: Then & Now
Page 13: SXSWUI15  UI Patterns: Then & Now
Page 15: SXSWUI15  UI Patterns: Then & Now

(or nostalgia for a few years ago)

Page 17: SXSWUI15  UI Patterns: Then & Now
Page 18: SXSWUI15  UI Patterns: Then & Now
Page 21: SXSWUI15  UI Patterns: Then & Now
Page 25: SXSWUI15  UI Patterns: Then & Now
Page 28: SXSWUI15  UI Patterns: Then & Now
Page 30: SXSWUI15  UI Patterns: Then & Now
Page 34: SXSWUI15  UI Patterns: Then & Now
Page 35: SXSWUI15  UI Patterns: Then & Now
Page 36: SXSWUI15  UI Patterns: Then & Now

• Single screen on content

• Higher info/content density

• Puzzle–pieced layout

• Hierarchy is more subtle

• Composition mimic print

• Flow is still hierarchical and linear

Page 37: SXSWUI15  UI Patterns: Then & Now

http://i.huffpost.com/gen/1742862/images/o-HIPSTER-facebook.jpg

Page 38: SXSWUI15  UI Patterns: Then & Now
Page 40: SXSWUI15  UI Patterns: Then & Now

Why the change?

Page 41: SXSWUI15  UI Patterns: Then & Now
Page 42: SXSWUI15  UI Patterns: Then & Now

Responsive Grids

Long page layouts

Typography

Web Fonts

Forms

Animation

Navigation

Footers

Sliders

Page 44: SXSWUI15  UI Patterns: Then & Now
Page 45: SXSWUI15  UI Patterns: Then & Now

http://www.smashingmagazine.com/2012/03/19/gridpak-the-responsive-grid-generator/

Page 48: SXSWUI15  UI Patterns: Then & Now

• http://gridpak.com/

• http://goldengridsystem.com/

• http://responsify.it/

• http://fluidbaselinegrid.com/

• http://www.columnal.com/

• http://framelessgrid.com/

• http://www.elliotjaystocks.com/blog/a-better-photoshop-grid-for-responsive-web-design/

Page 50: SXSWUI15  UI Patterns: Then & Now

http://images.tvfanatic.com/iu/t_full/v1371141963/helen-lovejoy-pic.png

Page 51: SXSWUI15  UI Patterns: Then & Now
Page 52: SXSWUI15  UI Patterns: Then & Now

http://blog.chartbeat.com/2013/08/12/scroll-behavior-across-the-web/

Page 53: SXSWUI15  UI Patterns: Then & Now

• Many visitors scroll down the page before it finishes

loading, which means that no portion of a typical article is

viewed by 100% of viewers .

• The most viewed area of the page is just above the fold, at

about 550 pixels, with just over 80% viewership.

• From this peak at 550 pixels, there is a slow decay in

viewership. About 50% of readers see 1500 pixels down the

page on content pages, while on home pages and section

fronts 50% of readers make it to pixel 1000

Page 54: SXSWUI15  UI Patterns: Then & Now
Page 56: SXSWUI15  UI Patterns: Then & Now
Page 57: SXSWUI15  UI Patterns: Then & Now

1. Your website heavily relies on mobile trafficas a key source of visitors.

2. Your website has information that can be chunked/grouped into discrete sections; or help to build a narrative

3. Your website updates frequently and presents content in a reverse chronological order

Page 58: SXSWUI15  UI Patterns: Then & Now

http://www.poynter.org/news/mediawire/257466/time-coms-bounce-rate-down-15-percentage-points-since-adopting-continuous-scroll/

Page 59: SXSWUI15  UI Patterns: Then & Now

Since its March redesign, Time.com’s bounce rate —has declined by 15 percentage points, according to managing editor Edward Felsenthal.

The percentage of desktop visitors going to another piece of content jumped 21 percentage points between February and May.

Felsenthal attributed that to the continuous scroll, which provides a clickless path for readers to reach another story.

Page 61: SXSWUI15  UI Patterns: Then & Now

—Robert Bringhurst

Image: http://www.poetryinvoice.com/poets/robert-bringhurst

Page 62: SXSWUI15  UI Patterns: Then & Now

Tim Brown

• https://vimeo.com/17079380

• http://alistapart.com/article/more-meaningful-typography

Page 63: SXSWUI15  UI Patterns: Then & Now
Page 67: SXSWUI15  UI Patterns: Then & Now

Arial is dead, long live Arial

Page 69: SXSWUI15  UI Patterns: Then & Now
Page 70: SXSWUI15  UI Patterns: Then & Now

Scalability: they can be increased in size with no

loss in fidelity. Plus you can change their color

easily, or add shadows and change their

transparency…

Page 71: SXSWUI15  UI Patterns: Then & Now

One is the potential problem with screen readers

that might read aloud the icon as an alphabetical

letter. Note: This is not a problem with well made

icon fonts.

Icon Fonts can only be presented in a single color

(or in a color gradient using CSS3 gradients). But

this can be wonderful if you logo is a single color?

Page 72: SXSWUI15  UI Patterns: Then & Now

• https://icomoon.io/

• http://fortawesome.github.io/Font-Awesome/

• http://weloveiconfonts.com/

• http://typicons.com/

• http://fontello.com/

Page 74: SXSWUI15  UI Patterns: Then & Now

http://alistapart.com/article/flat-ui-and-forms

Page 75: SXSWUI15  UI Patterns: Then & Now

The three biggest ways flat forms fail

• Lack of affordance (affordance is how much the design of an object—physical or digital—suggests use, like a chair inviting you to sit

• Insufficient distinction between form elements (e.g., fields versus labels versus instructions versus buttons)

• Insufficient hierarchy within categories of form elements (e.g., primary versus secondary buttons)

Page 77: SXSWUI15  UI Patterns: Then & Now

• Causality - When one thing happens just before another, our brains infer that the two things are related and that the first caused the second

• Feedback - when something indicates to a user that their actions have triggered a response

• Relationships - where things are hierarchically and spatially in relation to one another and

• Progression – where you are in a linear sequence

• Physics – skeuomorphism (yea I said it)

• Transition – crossfade from one state to another

http://alistapart.com/article/web-animation-at-work

Page 79: SXSWUI15  UI Patterns: Then & Now

• http://www.charitywater.org/

• http://uk.rimmellondon.com/

• https://xiffe.com/

• http://www.cambodiasri.org/

Page 81: SXSWUI15  UI Patterns: Then & Now
Page 82: SXSWUI15  UI Patterns: Then & Now
Page 83: SXSWUI15  UI Patterns: Then & Now

Source: http://techcrunch.com/2014/05/24/before-the-hamburger-button-kills-you/

Page 84: SXSWUI15  UI Patterns: Then & Now

Commentary by Luis Abreu

The Problems

• Lower Discoverability

• Less Efficient

• Clash with Platform Navigation Patterns

• Not Glanceable

(https://lmjabreu.com/post/why-and-how-to-avoid-hamburger-menus/)

Page 85: SXSWUI15  UI Patterns: Then & Now

Reviewing your information architectureto reduce items down to 5 or so.

Page 86: SXSWUI15  UI Patterns: Then & Now
Page 87: SXSWUI15  UI Patterns: Then & Now
Page 88: SXSWUI15  UI Patterns: Then & Now

http://thenextweb.com/dd/2014/04/08/ux-designers-side-drawer-navigation-costing-half-user-engagement

The take-away from all of this is that if most of the user experience takes place in a single view, and it’s only things like user settings and options that need to be accessed in separate screens, then keeping the main UI nice and clean by burying those in a side menu is the way to go.

Page 89: SXSWUI15  UI Patterns: Then & Now
Page 90: SXSWUI15  UI Patterns: Then & Now
Page 91: SXSWUI15  UI Patterns: Then & Now

Source: http://exisweb.net/mobile-menu-abtest

Page 92: SXSWUI15  UI Patterns: Then & Now
Page 93: SXSWUI15  UI Patterns: Then & Now

240,000 unique mobile visitors were served the A/B test.

The “MENU” button was clicked by 20% more unique visitors than the

“HAMBURGER” button.

Source: http://exisweb.net/menu-eats-hamburger

Page 94: SXSWUI15  UI Patterns: Then & Now

Unique Visitors 120,543 121,152

Unique Clicks 1,211 1,455

Engagement 1.0% 1.2%

Page 99: SXSWUI15  UI Patterns: Then & Now
Page 100: SXSWUI15  UI Patterns: Then & Now
Page 103: SXSWUI15  UI Patterns: Then & Now
Page 104: SXSWUI15  UI Patterns: Then & Now
Page 108: SXSWUI15  UI Patterns: Then & Now

Bootstraphttp://getbootstrap.com/components/

Quick and easy to be off and running, good documentation. Lightly skinned and the CSS is set up in such a way that it is very easy to restyle.

Foundationhttp://foundation.zurb.com/docs

Very similar to Bootstrap but even more lightly skinned.

Sencha extJShttp://dev.sencha.com/ext/5.1.0/examples/kitchensink/

Javascript library providing a huge array of features. This is a bit more than a "plug n play" library.

jQuery Toolshttp://jquerytools.github.io/demos

Fairly limited library of widgets, more-or-less on par with jQueryUI. Pretty heavily skinned, best to use if you like what they look like out of the box.

jQueryUIhttp://jqueryui.com/demos/

Pretty heavily skinned (with theme options), best to use if you like what they look like out of the box.

Page 110: SXSWUI15  UI Patterns: Then & Now

• Better linkshttp://codepen.io/mackleys/pen/YPOqzv

• Navigationhttp://codepen.io/mackleys/pen/gbzmdY

• Buttonshttp://codepen.io/mackleys/pen/gbzmdY

Page 111: SXSWUI15  UI Patterns: Then & Now