Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
Here is Your Magic Content Wand
Next
Download to read offline and view in fullscreen.

Share

SXSWUI15 UI Patterns: Then & Now

Download to read offline

Slides from my SXSW workshop entitled "UI Patterns: Then & Now". Reviewed some UI patterns on sites form a few years back, comparing to their current version, with a closer look at some newer UI patterns like hamburger menus, longer (below the fold) page content, and moving away from hero space sliders.

Related Audiobooks

Free with a 30 day trial from Scribd

See all

SXSWUI15 UI Patterns: Then & Now

  1. 1. Steve MacKley Beaconfire
  2. 2. I don’t really care, one way or the other
  3. 3. 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/
  4. 4. Image: http://keyezer.com/old-school-vs-new-school/
  5. 5. • 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
  6. 6. (or nostalgia for a few years ago)
  7. 7. • Single screen on content • Higher info/content density • Puzzle–pieced layout • Hierarchy is more subtle • Composition mimic print • Flow is still hierarchical and linear
  8. 8. http://i.huffpost.com/gen/1742862/images/o-HIPSTER-facebook.jpg
  9. 9. Why the change?
  10. 10. Responsive Grids Long page layouts Typography Web Fonts Forms Animation Navigation Footers Sliders
  11. 11. http://www.smashingmagazine.com/2012/03/19/gridpak-the-responsive-grid-generator/
  12. 12. • 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/
  13. 13. http://images.tvfanatic.com/iu/t_full/v1371141963/helen-lovejoy-pic.png
  14. 14. http://blog.chartbeat.com/2013/08/12/scroll-behavior-across-the-web/
  15. 15. • 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
  16. 16. 1. Your website heavily relies on mobile traffic as 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
  17. 17. http://www.poynter.org/news/mediawire/25746 6/time-coms-bounce-rate-down-15-percentage- points-since-adopting-continuous-scroll/
  18. 18. 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.
  19. 19. —Robert Bringhurst Image: http://www.poetryinvoice.com/poets/robert-bringhurst
  20. 20. Tim Brown • https://vimeo.com/17079380 • http://alistapart.com/article/more-meaningful- typography
  21. 21. Arial is dead, long live Arial
  22. 22. 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…
  23. 23. 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?
  24. 24. • https://icomoon.io/ • http://fortawesome.github.io/Font-Awesome/ • http://weloveiconfonts.com/ • http://typicons.com/ • http://fontello.com/
  25. 25. http://alistapart.com/article/flat-ui-and-forms
  26. 26. 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)
  27. 27. • 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
  28. 28. • http://www.charitywater.org/ • http://uk.rimmellondon.com/ • https://xiffe.com/ • http://www.cambodiasri.org/
  29. 29. Source: http://techcrunch.com/2014/05/24/before-the-hamburger-button-kills-you/
  30. 30. 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/)
  31. 31. Reviewing your information architecture to reduce items down to 5 or so.
  32. 32. 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.
  33. 33. Source: http://exisweb.net/mobile-menu-abtest
  34. 34. 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
  35. 35. Unique Visitors 120,543 121,152 Unique Clicks 1,211 1,455 Engagement 1.0% 1.2%
  36. 36. Bootstrap http://getbootstrap.com/compo nents/ 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. Foundation http://foundation.zurb.com/docs Very similar to Bootstrap but even more lightly skinned. Sencha extJS http://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 Tools http://jquerytools.github.io/dem os 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. jQueryUI http://jqueryui.com/demos/ Pretty heavily skinned (with theme options), best to use if you like what they look like out of the box.
  37. 37. • Better links http://codepen.io/mackleys/pen/YPOqzv • Navigation http://codepen.io/mackleys/pen/gbzmdY • Buttons http://codepen.io/mackleys/pen/gbzmdY
  • MarieClaireAndrea

    Jun. 11, 2018
  • LydiaCrestani1

    Jul. 9, 2017
  • YassinMohamed7

    Apr. 30, 2016
  • yujinjeon3

    Mar. 12, 2016
  • megusikzakova

    Aug. 5, 2015
  • girbaud561

    Jul. 9, 2015
  • cmUX

    May. 28, 2015
  • ssuser39d78e

    May. 1, 2015
  • asdsa11111

    Apr. 6, 2015
  • Harleyj237

    Apr. 4, 2015
  • dkuramoto

    Mar. 31, 2015
  • paribhupan

    Mar. 30, 2015
  • JessicaSanford3

    Mar. 29, 2015
  • PiperSmith

    Mar. 28, 2015
  • simonedjb

    Mar. 28, 2015
  • servicesolaharti

    Mar. 27, 2015
  • yiannisantoniou

    Mar. 26, 2015
  • peekashalo

    Mar. 26, 2015
  • sven_loewke

    Mar. 26, 2015
  • FabioCannillo

    Mar. 26, 2015

Slides from my SXSW workshop entitled "UI Patterns: Then & Now". Reviewed some UI patterns on sites form a few years back, comparing to their current version, with a closer look at some newer UI patterns like hamburger menus, longer (below the fold) page content, and moving away from hero space sliders.

Views

Total views

5,391

On Slideshare

0

From embeds

0

Number of embeds

51

Actions

Downloads

240

Shares

0

Comments

0

Likes

70

×