Functioning Form: Interface Design
http://www.lukew.com/ff/
Functioning Form: Merging medium and message in interface design, the user experience design process, Web applications, and more.en-usLuke Wroblewskihttp://www.lukew.com/img5/aim_icon.gifFunctioning Form> http://www.lukew.com/ff/2009-07-03<![CDATA[Understanding Capabilities]]>http://www.lukew.com/ff/entry.asp?844consumer device product platforms with deep interest. One might wonder: why so many articles on the technology within smart phones, consoles, media players, and netbooks/pads?
It boils down to a simple mantra: know your medium. As a designer, understanding the capabilities of technology empowers you to deliver interfaces that empower people in new ways. It was this belief that lead Frank Ramirez and I to author Web Application Solutions: A Designer’s Guide more than 4 years ago (April 2005).
In the document, we compared some of the most popular Web application presentation layer solutions available through consistent criteria (deployment & reach, user interactions, processing, interface components & customization, back-end integration, future proofing, staffing & cost, unique features) and provided an overview, set of examples, and references for each. This guide helped us to better understand the technologies supporting our Web application designs. It was a way to better understand our medium.
Since the digital product design medium keeps changing, keeping up with capabilities is essential.
Tags: technology, innovative UIs, interface, product concepts, mobile]]>2009-07-03LukeW<![CDATA[More Sensors Coming to the iPhone...]]>http://www.lukew.com/ff/entry.asp?843Designing for Sensors, I outlined how ubiquitous integration of sensor technologies in consumer devices shifts how we think about designing digital products. Soon, instead of just designing for computing (productivity and data management) or communication (email, social networks), we'll be designing for sensors.
Today Apple Inc. revealed new patent applications that cover additional sensors which could be used in future versions of the iPhone. From Mac Rumors:
Haptic Tactile Feedback: Adoption of "haptic" display technologies which allow the user to "feel" different surfaces as their finger moves across a touchscreen. As an example, a display could include a virtual click wheel which vibrates at a different frequency at the center. Users could easily sense the difference and use the click wheel without having to look at it.
Fingerprint Identification as an Input Method: Fingerprints have already been used in computers for security purposes, but Apple's research involves the use of fingerprint patterns to actually identify distinct fingers. This could then be used to produce specific functions depending on which finger is being used.
RFID Reader: Apple suggests that an RFID antenna can be placed in the touch sensor panel itself, allowing it to also be used as a RFID reader. RFID tags are tiny chips that chips that label objects with unique identities and can be used to track items at a distance.
These three capabilities would be added to an already impressive list of sensor integrations.
Location sensor: precise location coordinates from GPS
User orientation sensor: directional heading from a digital compass
Touch sensors: Multi-touch input from one or more simultaneous gestures
Light/dark sensor: Ambient light detection
Device orientation & motion sensor: from built-in accelerometer
Proximity sensor: device closeness to other objects or people
Audio sensor: input from a microphone
Image & video sensors: capture/input from a camera (all kinds of signals can be found in real-time visual information)
Device sensor: through Bluetooth
Audio broadcast sensor: FM transmitter (rumored on iPhone)
Tags: apple, mobile, sensors, technology, convergence]]>2009-07-02LukeW<![CDATA[Stacks on the iPhone]]>http://www.lukew.com/ff/entry.asp?842Apple’s Next Integrations article, I showcased several examples of how the company integrates new capabilities across its product line. Developer Steven Troughton-Smith recently did the same himself by building an implementation of OS X's Stacks feature on the iPhone.
Tags: apple, innovative UIs, UI components, interaction design, navigation]]>2009-06-29LukeW<![CDATA[First Person UIs on Android]]>http://www.lukew.com/ff/entry.asp?841iPhone with a Compass = First Person UIs article, I discussed how location and orientation awareness in mobile devices opens up a set of new interface possibilities that are designed from the user’s current perspective. In other words, first person user interfaces that are built knowing where you are and where you are facing.
Recently I found three such applications have made their way to Google's Android Market. Though in their early stages, these apps demonstrate the potential of creating user interfaces from a natural, first person perspective: how we actually see the world.
IBM Seer beta
The IBM Seer beta is an application designed to help you navigate you way through a better time at Wimbledon. Point your phone at anything the app will tell you what it is. In camera mode what you're looking at and what's happening there now. For example, concessions reveal themselves to you and then tell you how long you can expect to queue. Check out screenshots of the app in action.
Layar
Layar shows what is around you by displaying real time digital information on top of reality through the camera of your mobile phone (Augmented Reality). This version is available in the Netherlands only.
Wikitude
See the world through your phone’s camera view overlaid with Wikipedia content. What you see is an annotated landscape, mountain names, landmark descriptions, and interesting stories: Augmented-reality for everyday use.
Tags: forms, global design, UI components, guidelines]]>2009-06-24LukeW<![CDATA[Apple’s Next Integrations]]>http://www.lukew.com/ff/entry.asp?839
Consider the lifecycle of Coverflow: a software capability that allows fluid visual browsing of digital assets. Coverflow first appeared in the iTunes media application, then made its way to the iPod line of portable media players, then became an optional way to browse files in the OSX Finder, and now serves as a visual search results list for your browsing history in the Safari Web browser.
The iSight video camera, which began life as a stand-alone hardware peripheral, was integrated into the laptop line, then recently made its way into the latest version of the iPhone. Even the video editing software on the new iPhone started life elsewhere like iLife, Final Cut, and Quicktime software.
Other notable integrations include multi-touch (phone to ipod to laptop), non-removable extended life batteries (ipod to phone to laptop), glass & aluminum, and more. Given the consistent level of integration of Apple’s hardware and software integrations, it may be reasonable to look for clues of what’s next by considering integration opportunities. For instance, face recognition was shipped in the 2009 version of iPhoto. Chances are it will show up in the iPhone soon.
Quick Look for files on the iPhone based on OS X improvements
And so on...
Tags: apple, product concepts, technology]]>2009-06-23LukeW<![CDATA[UX London: Parti and the Design Sandwich]]>http://www.lukew.com/ff/entry.asp?838Parti & the Design Sandwich talk at UX London 2009, I outlined a structure to enable interaction designers to move toward a holistic product design in the face of many stakeholders, cross-functional groups, and diverse audiences.
Parti & the design sandwich is a structure for projects that allows you to go from concepts to products using the tools of design.
Parti (as defined by Matthew Frederick) is the central idea or concept of your project. A parti is expressed as a diagram depicting general structure and experiential & aesthetic sensibility.
In interaction design, that means a core interaction model. The inclusion of a core interaction model to represent the big idea is how a parti differs from product vision -though there are many parallels.
Getting a parti requires the consideration of factors outside of design such as technology opportunity, market factors, resources, alignment, etc.
Parti should focus on the aspects of an interaction that are unique to a project.
The whole team needs to buy in to a parti.
Parti is a guidepost for designing the many aspects of a project but the design sandwich helps us make informed decisions that bring a parti to life.
At the top of the sandwich are design principles. These are filters for making decisions.
At the bottom of the sandwich are design considerations. These are the factors you learn about and weigh when considering options.
The middle of the sandwich is where decisions about the design happen. Patterns, best practices, and testing -all can help inform decisions.
The distinction for me between best practices and patterns is nuanced –a pattern is a way you can do things in a specific context. A best practice is the way you SHOULD do things in a specific context.
Using parti & the design sandwich to structure a project means:
Considering all the things that are relevant to a design decision (design considerations).
Making use of patterns, best practices, and testing (when we can) to help inform decisions.
Evaluating those decisions by passing them through a filter of design principles so that all the decisions we make support the central idea of what we are making.
The point of which is to create a holistic design.
Your parti can change but don't give up on having a parti for your project.
Update: A listing of live Twitter messages from my presentation at UX London at disambiguity.com
Tags: decision making, design vision, interaction design, user experience, models, patterns]]>2009-06-15LukeW<![CDATA[UX London: In Favour of Complexity]]>http://www.lukew.com/ff/entry.asp?837In Favour of Complexity keynote at UX London 2009 made the case for complexity with order, lucidity and understandability.
People cry out for simplicity. Our stuff is too complex, we want things to be easier. When everyone is asking for something, tend to take the opposite approach.
We should all seek simplicity and distrust it.
Life is Complex, Tools must match life, Understanding (not simplicity), It’s about design.
It’s not easy to get simple products out to market. Many people can improve products through a process. To make something simple is hard.
An entire system’s complexity is unchanged. You just can move complexity around. By making it easier for the programmer me make things harder for the user.
Some complex things are understandable and great.
Simple things can be confusing: everyday objects often need additional clarification. Many simple things turn up often in life and through multiplicity and create complexity.
Culture matters. In Asia, crowded designs are quite popular.
Google is optimized for Search. Yahoo! is optimized for exploration. With Google it takes more work to explore. Google is the most popular search engine but Yahoo! is the most popular home page, finance site, etc.
One way of dealing with complexity is ignoring it.
People with messy offices can usually find things better than people with super clean offices.
People prefer complex things. If too simple, it’s boring. Experience moves the preferred complexity up. Complexity is a moving target not a fixed target.
Category error: comparing a paintbrush with an artist’s studio
There’s a sweet spot for complexity. The problem is that it keeps moving.
If you increase skill, you have to increase difficulty. Engagement occurs when people are in the flow: a very enjoyable and productive state.
Needless complexity: music notation is modal depending on the clef and has many variations with exceptions. One solution is the chromatic scale on a 5-line staff. What does it take to get things adopted? That’s the hard part. Those who need to lead the change often don’t see a reason to change.
When a new consumer good is released to the world, reviewers get a hold of it. Reviewers, salespeople, and feature-minded marketing are the reason for needless complexity.
People believe as you add more features, you add more capability. Making more feature-laden products more desirable. We also believe adding more features decreases usability. Both are wrong.
How do we solve the complexity problem? First approach: design
Can contain complexity by modularizing actions.
Teachable moments help people manage complex interactions.
Conceptual models can be used understand complex systems but may not scale very well. Hierarchical file systems no longer scale at large data sets.
Systems thinking can help manage complexity. iPod & iTunes are a system for integration. An SAP database powers the Tunes music store.
Amazon Kinlde is the only e-reader that has integrated a service into the device. No passwords, networks needed to access books.
Tags: don norman, simplicity, communication, apple, usability]]>2009-06-15LukeW<![CDATA[UX London: Designing Our Way Through Data]]>http://www.lukew.com/ff/entry.asp?836Designing Our Way Through Data presentation at UX London 2009 described how a combination of information visualization techniques, individual participation, and passion can help create the future of the Web.
1974: represent the end of the sixties. Took cutting edge ideas and pulled them into the mainstream. Centralized authority being pulled apart and put into distributed packets (Internet).
There’s a growing amount of participation in media instead of just consumption.
Now have sophisticated tools for participation coupled with high scale of data.
Managing huge amounts of data. 24 hours of video uploaded every 8 seconds to YouTube.
On an average data set, can layer in labeling, hierarchy, can use design elements to tell a story.
Decorating data can be dangerous as it may distract rather than provide value.
Dr. John Snow had a hypothesis that cholera might have been water-bound not air-bound. Laid data points on a map of existing sewer system to identify source of outbreak.
Visualizations can illuminate stories inside of datasets.
Google data analytics team was inspired by Indiana Jones to simplify their graphs of data.
Find a story in the data and communicate it.
Assign different visual cues to each dimension of the data.
Remove everything that isn’t telling the story.
Tools of participation influence how much of the story you can control. On the Web, designers have less control.
Give tools to people to manipulate their own stories. Create interesting filters for people to manipulate information.
Storytelling now moves to discovery
Visual cues in stories are now interactive elements in data sets
Editing data sets is now filtering.
Know yourself first but learn about your users.
Research is like traveling: an experience to learn more about the world.
On the Avis website, people could not fill in what looks like a simple form. An asterisk was used to indicate “optional” but everyone thought it meant “required”. When do we cross the line from intuitive to un-intuitive?
Designs don’t “intuit” anything. People “intuit” things. Designs, therefore, cannot be intuitive. People can intuit what to do with a design.
When a design is not intuitive, people look at it and don’t know what to do. Feels like it takes time to figure out, people become frustrated.
It's not novelty that causes problems with intuitiveness, its not simplicity. Intuitive is personal –based on what people currently know and their previous experiences.
Intuitive design is evolutionary. First build the technology, then add features, then focus on experience.
When at the technology stage, people will accept difficult designs in order to get things done. They need the new capabilities.
Spectrum of knowledge about a product has a few points worth considering. Current knowledge (what the users already know), target knowledge (what people need to know), the knowledge gap is the space in between (where we need to design).
Use case: instant messenger designs for dealing with a secure connection. Google Talk: assumes user knows proxies and firewall settings, get sent to generic help files to hunt for information. Skype asks users to set port options but provides specific online help for assistance. Yahoo! uses inline text to explain likely choices by reducing target knowledge. AOL uses auto configure wizard to deduce proper settings to reduce target knowledge.
The problem with wizards is when they don’t work as people need a lot more target knowledge is needed to set things up.
A design is intuitive when: current knowledge is equal to target knowledge.
Two different kinds of knowledge. Tool knowledge: specific to the tool you are using. Domain knowledge: specific to the domain you are using.
Field studies: observe people using your products in their natural environment. Helps identify current knowledge.
Usability studies: help identify target knowledge and the gap.
Can use personas to capture current knowledge.
Design patterns can store solutions for target knowledge.
Reduce target knowledge down to toward current knowledge. Provide clear tools to bring current knowledge up.
Tags: decision making, usability, simplicity]]>2009-06-15LukeW<![CDATA[UX London: Designing from the Inside Out]]>http://www.lukew.com/ff/entry.asp?834Designing from the Inside Out: Behaviour as the Engine of Product Design talk at UX London 2009 outlined how behavior can serve as a driving factor for form and the mechanics of function in products.
For most people, the interface is the product. It’s an outside-in experience
It’s easier to focus on form than behavior. Likewise easier to focus on mechanics (how it will work) than how it will behave.
Behavior: how the product acts, the tasks the product allows users to do, maximizing the abilities of the product, actions you want to engender through the use of the product itself.
The best products: are aesthetically pleasing; are plug & play; have personal or professional value; seem transparent; offer clear affordances/instruction; put functionality on the correct platform; have responsive feedback; use conventions… or do something better; make it difficult to make mistakes; have moments of delight; respect the users time & effort; and are aware of context of use
The best way to achieve most of these characteristics is by focusing on behavior. But if the interface is the product, how do we design from the inside out?
Behavior can be a major product differentiator and can be a defense against feature-itis
People love features: we enjoy comparing products side by side. Companies love features too –they give them something to talk about and market.
Features are a poor long -term strategy as they will be built by competitors. Its easy to replicate features but hard to replicate how features behave.
Behavior as design research: stop looking for people’s goals. Start looking at motivations, expectations, and actions.
Translating goals or (worse) preferences into products results in bad products.
Behavior as product structure: how does the system behave when people engage with it? The same feature can fell completely different based on how it responds and how it is accessed.
Transitions matter: cannot be well represented through paper documentation. Need prototyping.
What activities does the product need to support?
What is the product’s core activity? This will determine the “buddah nature” of the application.
What behavior do you want to encourage or discourage? Very difficult to change human behavior. Much easier to change the mechanics of the system than behavior.
Put the right functionality in the right places. Should features be digital, physical, or both? When & where will the feature be used? What is the feature’s priority? Does it need to be available all the time? How much resources should be spent? Consider ergonomics?
Start from the behavior, and then figure out what should control it. The physical form, UI elements on the screen, or even gestures in a space.
Behavior drives the form and mechanics.
Tags: interaction design, form|function, process]]>2009-06-15LukeW<![CDATA[UX London: e-Service]]>http://www.lukew.com/ff/entry.asp?833e-Service presentation at UX London 2009 walked through examples of bad customer service in action and presented strategies for avoiding similar pitfalls in your online experience.
Service is 100% about user experience. User experience is not 100% about service.
Companies with an 83% satisfaction are in trouble. Need 90% satisfaction for long-term customer loyalty.
Service management is a process not a program. Goes on for a long time with no finish line.
Unhappy customers are dangerous. If you have a good experience you will tell three friends. If you are an unhappy customer, you will tell 17 people.
Service happens at the moment of experience. Moments of truth are when and where people experience customer service. Brand touch points happen everywhere.
Service is an intangible event that helps us achieve something.
10 reasons services are tougher to manage than products:
Produced at the moment of delivery
Cannot be recalled if sucks
Experience cannot be sold or passed on
Product cannot be demonstrated. You cannot send a sample.
Cannot be centrally produced, inspected, or warehoused.
Quality assurance needs to happen before production
Help, Enhance, Fix –three ways to provide service
Don’t just prevent bad things from happening. Educate front-line staff that it is not just prevention, but also making wonderful things happen.
Beware of the easily measurable metrics. These often just meet basic expectations. They do not exceed.
The online & offline worlds are intersecting. The whole experience needs to be choreographed.
All the rules of offline service design apply online.
Tags: user experience, business, context]]>2009-06-15LukeW<![CDATA[Web Form Layouts: Some Additional Guidelines]]>http://www.lukew.com/ff/entry.asp?832
The first set, Web form design guidelines: an eyetracking study from cxpartners, looked at ease of completion and user satisfaction for three registration forms with distinct layouts: Yahoo! Mail, Google Mail, Hotmail and eBay. Though there were several different variables between the forms and the team only "looked for trends in best practices when designing forms", they compiled a list of guidelines that closely aligns with previous research I've seen:
Vertical, not horizontal: Users complete web forms from top to bottom. Therefore forms with a simple vertical layout are always better than multi-column layouts.
There are some exception cases where the ’single column’ rule can be broken. Users expect to see names (first and last name), dates (year, month and day) and time (hour and minute) written on a single line.
Use coloured or shaded grouping headers ONLY if they are important. If they are not important, don’t bother to do so to avoid distracting users from filling in the form.
Don’t use asterisks, make clear optional fields. People go on to a form expecting to fill in everything. If possible, only ask users for information that is absolutely required. If for marketing purpose or for some other reasons where optional fields are needed, we suggest to mark optional fields clearly instead of indicating the mandatory fields.
Use single field for numbers or postcode. Use single field for numbers or postcodes, allow input in various forms. If not, use a good system validation and provide clear error messages if invalid input is entered
The second set of guidelines was shared by Caroline Jarrett and summarizes the work of Dr Kathryn Summers of the University of Baltimore on forms for low literacy users.
We found that the shortish labels worked above or to the left.
We found that a single column worked best for low literacy users, except for fields that "logically" felt like a group: specifically city, state, zip.
Name should be all one field if possible.
We noticed that low literacy users generally abbreviated short form labels to just one word (they would read just one word), so email address became "address" and first name became "name."
All text associated with the form should be 14 pt in size. The font size makes a big difference in readability generally for low literacy users (the text size in the website should really be 14 pt also, although I've seen 12 pt work.
All elements of the form should be above the fold, especially for older users, even if that means lots of screens.
Tags: forms, Web applications, guidelines, research]]>2009-06-13LukeW<![CDATA[Know Your Core: Providing Focus for Web Applications]]>http://www.lukew.com/ff/entry.asp?831Communication Design column in UXmatters this quarter, I discuss the importance of defining and focusing on a "core" for Web applications.
To stand out from the burgeoning number of products online and help your organization make the right decisions about what to build, it’s crucial to develop and stay focused on a clear value for your Web application that is distinct and obvious. In other words, you need to know your product’s core:
Be able to define your product clearly and concisely.
Build what defines your product first and hold it sacred.
Tags: design vision, decision making, Web applications, strategy]]>2009-06-09LukeW<![CDATA[Influence, Not Control]]>http://www.lukew.com/ff/entry.asp?829
In a nutshell, many managers believe control is the answer to getting things done. "If the engineering team reported to me, I could ship better products." In truth, you can't control almost anyone, but you can influence almost everyone. This is illustrated in the control vs. influence model shown below.
"Influence is the area that is affected by a person’s actions but is not 100% under their control. Beyond our sphere of control is our sphere of influence, which is typically larger than our sphere of control but is smaller than the final sphere, representing what we can’t control or influence. ...the larger the sphere of influence, the greater [a manager's] ability to achieve desired results." -John Ryan & Associates
Its interesting to think about the implications of this philosophy on digital product design. How many times do designers think they need to control an experience when instead they should focus on how to influence it? What interaction design or information architecture solutions maximize the sphere of influence to promote value creation, positive social norms, and more in software applications?
Insight Publishing has translated my latest book Web Form Design: Filling In the Blanks into Korean and the book is now available for sale in Korea. If you are interested, take a look at the book announcement from Insight and the product listing on their site. Or peek inside the book at the Korean book site: Aladdin.
