How
will business, design and technology be perfectly coordinated in the future? Strategists,
designers and developers gathered in New York for the WebVisions 2012 Convention
to share their visions and offer practical tips for getting things done. Three days of presentations, forums and
workshops covered topics of design thinking, UX design and entrepreneurship,
and new technologies across web and mobile platforms. Here are some of my takeaways
from the conference.
Different
Ways of Thinking About Design
A very inspiring session in the
area of web and mobile design was focusing on design thinking and innovation
strategy. Neither is new like the topic of emerging technologies, but their
impact on design and technology is incredible.
A couple of pioneers with both
hands in academia and industry shared their views on innovation.
Sparking
Business Transformation with Disruptive Thinking
Keynote speaker Luke Williams, a Fellow
at Frog Design and Adjunct Professor of Innovation at NYU Stern School of
Business, outlined a new method of design thinking enabling business leaders to
create meaningful changes and stay ahead of the game.
"Disruptive Thinking utilizes unconventional strategies to look at an
industry in an entirely new way and drives innovation by introducing something
totally different," he explains.
By seeing through what usually gets
ignored and paying attention to what’s not obvious, he believes that organizations
can alter the trajectory of a business and revive stagnant markets. He used the
rental car experience as an example.
"There's an expectation with rental cars that
you will see the customer, complete paperwork and rent cars by the day,"
he explained. But what happens when you invert all of these attributes and,
"You don't see the customer, you
skip the paperwork, and you rent cars by the hour? You have the zipcar."
he said.
Williams also proposed five stages
of Disruptive Thinking:
- Craft
a disruptive hypothesis
- Define
a disruptive market opportunity
- Generate several disruptive ideas
- Shape
a disruptive solution
- Make a
disruptive pitch
UX
Lessons from Science Fiction
Nathan Shedroff, Co-founder of
Vivid Studios and the chair of MBA in Design Strategy at California College of
the Arts (CCA), showcased his UX lessons from Sci-Fi films and applied these
findings to guide a better interface design in the first day’s workshop.
He first walked everyone through some
remarkable Sci-Fi films and called out the interactions for comparisons against
our real life interaction designs. He found reflections in real world designs
from new paradigms created in Sci-Fi films. One example he referenced is the Motorola
flip phone “StarTAC”, whose design was influenced by Star Trek’s Communicator
over 30 years ago! Star Trek’s imaginary interfaces inspired designers and
implanted this futuristic culture into our everyday life.
He also exemplified his ideas by
using an interaction joke in “Minority Report.” As Tom Cruise switched from operating
the user interface to shake another guy’s hand, the entire interface went away
and he had to pull all the work back.
“What
made the system really difficult to design is the social context they had to
consider – like having physical touch points between the UI and another person.
The more sophisticated the system is, the more sophisticated they have to be
aware of what we’re actually trying to do.”
To apply his concepts to real world practices,
in the workshop session - the audience was grouped to explore one of the
six topics on individual interface design project. Six topics specified key
aspects of interface design including: People in the interface, Gestural
Interface, Augmented Reality (Mobile), Anthropomorphism, Visual Design and
Sound in the Interface.
Making Right Decisions for Good Designs
The booming field of web and mobile
design also brought up new problems that UX experts, like Whitney Hess and
Crystal Beasley, were trying to cultivate positive experience design by lining
up guiding principles upon some inappropriate design decisions.
The
Philosophy of UX
Having been exposed to various UX
debates, Whitney Hess believes good design doesn’t automatically create a good
experience because they are based from separate philosophies. Design is about
utilizing principles of harmony, unity, contrast, emphasis, variety, balance,
proportion, repetition, movement and texture to make an impact visually. “User
Experience is the establishment of a philosophy about how to treat people”,
Hess claimed. She exemplified 10 principles of user experience by both good and
bad design that we experience in our daily lives. Referring to her second
principle, Create a hierarchy that matches people's needs, she pulled out mint.com
to address it.
“They’re
using the dramatic differences in font sizes, icon sizes, to highlight the most
crucial piece of information. They also organized all the icons across the top left to right in order of frequency of use from the left most icon being the most used to the least used icon on the right”, she added, “it helps people to better understand how to
scan the page with tons of information out there.”***
She also gave a high rating on Vimeo as one of
the best first-time user experiences by using the greeting message “Welcome,
you're new, aren't you?” in home page.
13
Signs Your Site Needs a UX Exorcism
UX Designer at Mozilla, Crystal
Beasley, went through many examples where bad design decisions came out of
people’s minds. Based on her own practices, she defined 13 signs that indicated
you’re on the verge of the wrong decision, coming up with her pragmatic tips
for the solutions. “I’ve got this really great idea for a site” is the starting
point. Beasley explained:
“We
get ourselves into this situation because of a lack of research into where
peoples’ needs and frustrations lie.”
Some of her other statements include:
“I’ve
got this really great idea for a feature.” -
Features add complexity. Make sure you’re optimizing for tasks that 80% of
users need and adopt user testing to make sure.
“I
think the button should be on the right.” -
You must test with real people to escape your biases.
“Maybe
we need a FAQ.” - The
most important information should be obvious. Users should have enough contexts
to know where they are within the structure of the site.
“Can’t
we just pop up a confirm dialog?” -
Prevent errors. Support undo.
“Make it
red so it will really stand out.” Red does stand out. That’s why you should
only use it for error text and critical system warnings.
Embracing New Technologies for Progressive Enhancement
Much of the attention in the area
of interaction design focused on progressive enhancement, responsive design and
mobile first. These are modern techniques in the field and developer
evangelists offered in-depth workshops on understanding and applying these
topics for both hard-core developers and UX designers.
Adaptive
Web Design
The workshop “Adaptive Web Design”
given by Aaron Gustafson framed the structure of web design through website
strategy, information architecture, interface design, and programming languages.
He believes that browsers and technologies come and go, so the web experience
building should not be restricted by any specific technologies. “You have to think
about your users," he said. Gustafson introduced Progressive Enhancement,
a principle that guides developers to add enhancements to improve the
experience based on the adaptation of the user-agent. He emphasized, “Content
is why we build websites. Clear, well-written prose is the key.”
To implement his idea, the audience was grouped
to organize and prioritize the same contents on four different devices: a smart
phone, a 7" tablet, a 10" tablet, and a desktop computer. Each group
tried to depict the information hierarchy considering the technical constraint of
the individual device. Gustafson questioned the navigation placement of my
group and asked, "Would it be better for the users if the navigation on a mobile
device was at the bottom of the page, below all the content they just looked
at, so that they’re ready to move to another area?"
HTML5
+ CSS3 = Your Web Design Future
In the second day workshop, Jason
Cranford Teague gave an in-depth workshop on how to use new CSS3 styles and
HTML5 page structures to create killer web designs in a future friendly manner.
He believes that being a great web designer is to understand the medium you are
designing for, recognizing its weaknesses and pushing its strengths. By
leveraging the new CSS3 technologies and the philosophy of progressive
enhancement, designers are able to quickly add gradients, drop shadows, rounded
corners, and a variety of static and interactive design styles to their web
pages. Participants explored and applied progressive enhancement to web designs,
produced solid page structures in HTML5 and used CSS3 for visual effects. The
workshop was heavy in technical jargon but Jason always brought it back to how
a development methodology can directly affect the user experience.
Summary
WebVisions bridged the gap between design and
technology in order to inspire us how we can create better experiences in the future.
The discussion of strategy, design, and technology through user experience, provides
new ways of thinking about seamless cross-channel experiences for modern web
design with progressive enhancement. Overall, it's been an inspiring journey to
see what some of the pioneers in the field are working on and how they predict
the web future being balanced with design, user experience, and business
strategy.
*** In a previous version of this blog I accidentally wrote that the icons were arranged right to left in order of frequency of use - from the right most icon being the most used to the least used icon on the left. This has now been corrected to say the icons are placed across the top left to right in order of frequency of use from the left most icon being the most used to the least used icon on the right.
