I’m not a fan of these ubiquitous social media prompt lightboxes in the first place, but using incredibly low-contrast type to convey the benefits of liking a site on Facebook – while the close box and “don’t ask again” type are so bright they immediately grab attention – seems counterproductive at best.
“ You should lead with a set of core values and a strategy to understand where you’re going and what’s being done. ”
Nice visual response to the question of “do we show it or not?” Ghosting inactive or not accessible content with a clearly positioned and stated message.
“ Over the last few years we’ve been hearing that end users want a work experience that more closely matches that of the applications they use in their private lives. ”
Hooray! #EnterpriseSoftware is finally waking up to the need for a #UX rethink. It is time for #VisualUsability everywhere! via @diginomica
Visual Usability features a sample redesign of the USDA’s food- and fitness-tracking application, so I was curious to see how LiveStrong.com handled similar design issues when they added new features and icons to their website and food-tracker.
Although I haven’t dived deep into their app yet, I was pleased to see this interactive timeline, now on many site pages, that provides public recognition for diet and fitness achievements. The timeline refreshes automatically to show off what LiveStrong members are up to, using simple, colorful icons for food, fitness, water consumption, and community posts, and appealingly rounded and open typography to describe the activity and its immediate impact. My one complaint – the hand symbol, used here to deliver a virtual “high five” congratulating the member – is similar to hand symbols I’ve seen used elsewhere (most notably Tumblr) for “ignore user” actions. This is a tricky case of a symbol having two very different meanings – in this case, diametrically opposed ones that can cause temporary confusion, at least until the user rolls over the “high five” icon to see an explanation.
LiveStrong also developed icons to promote the various benefits of its food- and fitness-tracking tools. While the icons depict important, serious concepts, their soft curves and thick lines give them a casual feel quite similar to the visual approach we used in the USDA redesign. We believed that every part of our sample design needed to feel welcoming and encouraging, and it looks like LiveStrong came to the same conclusion.
Here, too, though, I’ve got one complaint: the weight loss icon. Must it be a woman’s shrinking waist, as if women were the only dieters, and a small waist the only literal measure of her progress and value? (I also question how necessary the bikini bottoms were as opposed to something more gender-neutral.) Better to use the scale icon for “weight loss goals” and a bar chart or other graph icon for “charts and graphs,” which have no sexist baggage associated with them.
I love how this post from LayerVault outlines the issues of designing for new/infrequent users as hand-holding and how a user’s needs change with application use, especially this:
“How does one guide a new user from on-boarding, to low proficiency, to high proficiency? With progressive reduction, the UI adapts to the user’s proficiency.”
The example of a fairly generic checkmark serving as a symbol for a unique function – a “signpost” – brings an additional level of complexity to the situation the post describes, however. It is one thing to use labels initially to help users become comfortable with icons, and progressively reduce them with significant usage. It is another thing to ask users to internalize that a fairly generic-looking checkmark is serving as a symbol for the unique feature called ”Signpost,” as well as expecting them to remember what “Signpost” in LayerVault means.
I wonder if the issues LayerVault mentions with their Signpost feature would be lessened if they used an icon – an abstract picture – that looks like a signpost, rather than the checkmark for the feature.
I’m very excited to talk about a technique that we’ve started using at LayerVault. We call it Progressive Reduction.
“ what is needed is not the modern praise of new technology but a critical and creative aesthetic-technical production orientation that unites modern information and communication technology with design, art, culture and society and at the same time places the development of new mediating technologies in their real everyday context of changes in lifestyle, work and leisure. ”
Pelle Ehn, Manifesto for a digital Bauhaus ”Digital Creativity” 1998, Vol. 9, No. 4 pp. 207-216