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.
6. 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/
9. • 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
36. • Single screen on content
• Higher info/content density
• Puzzle–pieced layout
• Hierarchy is more subtle
• Composition mimic print
• Flow is still hierarchical and linear
53. • 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
54.
55.
56.
57. 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
59. 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.
70. 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…
71. 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?
75. 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)
76.
77. • 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
84. 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/)
93. 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
108. 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.