Log in to like this post! Envisioning the Future of UX: WebVisions NYC 2012 Miao Wang / Wednesday, February 22, 2012 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.