End User License Agreement (EULA) Presentation

by:   |  Posted on

This is an excerpt from the upcoming “Android Design Patterns: Interaction Design Solutions for Developers” (Wiley, 2013) by Greg Nudelman

The first thing your customers see when they download and open your app is the welcome mat you roll out for them. Unfortunately, this welcome mat commonly contains unfriendly impediments to progress and engagement: End User License Agreements (EULAs). Like the overzealous zombie cross-breed between a lawyer and a customs agent, this antipattern requires multiple forms to be filled out in triplicate, while keeping the customers from enjoying the app they have so laboriously invested time and flash memory space to download. This article exposes the culprit and suggests a friendlier welcome strategy for your mobile apps.

Antipattern: End User License Agreements (EULAs)

When customers open a mobile website, they can often engage immediately. Ironically, the same information accessed through apps frequently requires agreeing to various EULAs, often accompanied by ingenious strategies that force customers to slow down. EULA is an antipattern.

When and Where It Shows Up

EULAs are typically shown to the customer when the application is first launched and before the person can use the app. Unfortunately, when they do show up, EULAs are also frequently accompanied by various interface devices designed to slow people down. Some EULAs require people to scroll or paginate to the end of a 20-page document of incomprehensible lawyer-speak before they allow access. Others purposefully slow people down with confirmation screens that require extra taps. Truly, things in a torture department have evolved nicely since the days of Spanish Inquisition!

Example

Financial giant Chase provides a good example of a EULA. As shown in figure 1, when customers first download the Chase app, they are faced with having to accept a EULA even before they can log in.

figure1
Figure 1: EULA antipattern in Chase app.

 

 

 

 

 

 

 

 

 

 

What makes this example interesting, is that the same information is accessible on the mobile phone without needing to accept the EULA first: through the mobile web browser, as shown in Figure 2.

 

figure2
Figure 2: There is no EULA on the Chase mobile website.

 

 

 

 

 

 

 

 

 

 

 

 

Why Avoid It

The remarkable thing is not that the EULA is required. Lawyers want to eat, too, so the EULAs are an important component of today’s modern litigious society. Dealing with a first-world bank in the “New Normal” pretty much guarantees that you’ll be faced with signing some sort of a legal agreement at some point in the relationship. The issue is not the EULA itself—it is the thoughtlessness of the timing of the EULA’s appearance.

The app has no idea if you have turned on the mobile access on or have your password set up properly. (Most people have at least a few issues with this.) Therefore, the app has no idea if the bank can serve you on this device. However, already, the bank managed to warn you that doing business on the mobile device is dangerous and foolhardy and, should you choose to be reckless enough to continue, the bank thereby has no reasonable choice but to relinquish any and all responsibility for the future of your money. This is hardly an excellent way to start a mature brand relationship.

What should happen instead? Well, the mobile website provides a clue. First, it shows what a customer can do without logging in, such as finding a local branch or an ATM. Next, the mobile site enables the customer to log in. Then the system determines the state of the EULA that’s on file. If (to paraphrase Eric Clapton in “The Tales of Brave Ulysses”) the customers’ “naked ears were tortured by the EULA’s sweetly singing” at some point in the past, great—no need to repeat the sheer awesomeness of the experience. If not, well, it’s Lawyer Time. Consequently, if customers do not have Bill Pay turned on, for example, they don’t need to sign a Bill Pay EULA at all, now do they? The point is that the first page customers get when they first launch your app is your welcome mat. Make sure yours actually says “Welcome.”

Additional Considerations

Has anyone bothered asking, “How many relationships (that end well) begin with a EULA anyway?” How would Internet feel if every website you navigated to first asked you to agree to a EULA, even before you could see what the site was about? That just does not happen. You navigate to a website and see awesome welcome content immediately. (Otherwise, you’d be out of there before you could spell E-U-L-A.) When you use a site to purchase something, you get a simple Agree and Proceed button with a nearby link to a EULA agreement (not that anyone ever bothers to read those things anyway, especially on mobile) and merely proceed on your way.

If you can surf the web happily, taking for granted the awesomeness of the smorgasbord of information on the mobile and desktop, without ever giving a second thought to the EULAs, why do you need to tolerate a welcome mat of thoughtless invasive agreements on a mobile app platform?

Additional Information

You can find 70 essential mobile and tablet design ideas and antipatterns in my new book, Android Design Patterns: Interaction Design Solutions for Developers (Wiley, 2013) now available for pre-order at http://AndroidDesignBook.com where you can also sign up for the next free monthly Android Design Question and Answer session.

The Content Conundrum

by:   |  Posted on

rocks, intro image

As web designers and information architects, we often dismiss deep consideration of content when we design interactive experiences. By content I’m not only referring to the various forms of text (e.g., headers, body copy, error messages) but also imagery, graphics, and videos or audio that make up the full interactive experience.

Sure, we have a sense of what content is available, and we’ve likely considered it to some extent when creating flows, wireframes, and prototypes. But the design artifacts that we create represent only part of the overall user experience that we’re designing. The content that sits inside of our design framework is often the final arbiter of success, yet we sometimes diminish its importance and separate ourselves from it. The more we separate our design activities from content development, the greater the risk of design failure.

Recognizing The Problem — The Content Gap

There’s often an unsettling discrepancy between the stakeholder approved wireframes and visual comps and the actual product in production. What you see in those environments is sometimes a far cry from those polished wireframes and those shiny, pixel-perfect visualizations that were filled with placeholder content (such as lorem ipsum text, dummy copy, and image blocks). What you’re seeing in production environments now holds the real content. The imagery doesn’t support the interactions, is meaningless, useless, or worse, contradictory to the design intent. The copy, headers, and labels are unclear, too long, too short, or simply irrelevant.

What happened?

More than likely, that content was discussed, created, and iterated outside or separate from the core design review process and ultimately plugged into a content management system (or pasted into the code by a developer) much later in the development process.

The example illustrated in Figure 1 shows two examples of web content. The image on the left represents a screen shot of the approved design that was delivered to the production team. The image on the right is a screen shot of that same page taken from a functional test environment after the real content was included. As you can see, the experience breaks down considerably with the amount, type, and format of the real content. The information is more difficult to scan, the primary call-to-action has been pushed well below the fold, and the choices that users need to make are less clear.

These two screens show what the content gap looks like. On the left is the mockup next to what it looked like in production.

While this example highlights only a small portion of the overall web site, the problem manifested itself throughout the bulk of pages that made up this interactive experience. So what might be perceived as a small problem becomes a much bigger problem when considered across the entire interactive experience.

Exploring the Causes

These content gaps are both procedural and cultural within organizations. By procedural, I’m referring to the tangible processes used by an organization to design and develop a web product. Often times, these ‘processes’ are influenced by the organization’s values and overall culture. There are four common reasons why content gaps occur.

Flawed Processes

There’s undoubtedly a wide spectrum of web design and development ‘processes’ in use today. Most often, however, organizations use one that aligns more closely with either a traditional waterfall process or alternatively, an Agile one. In theory, both models have mechanisms built-in to eliminate and minimize surprises (including content gaps) but in reality, both tend to exacerbate the problem but do so in different ways. Rigid waterfall processes fail because they tend to segment activities and related roles. Designers often design totally separate from content ideation and development. Agile processes fail because they’re typically developer centric and move at speeds and iterations more akin to code production than to experience design and content development. The site is often being coded before the design or content are ever completed.

Content The Design(er) is King

We’re at a point now where usability is table stakes, and persuasion and message is necessary to differentiate products.

The value of most design projects is typically placed in the upfront design and strategy work. It’s here that the ‘big ideas’ are generated and explored. During this initial phase, are the right people involved in the design process alongside of us, exploring solutions? I’d argue that we rarely involve our content partners, even though we’re essentially creating a framework for communication and messaging. It’s here that content specialists thrive. We’d benefit from including those who specialize in communication, writing, persuasion, and instruction more directly. We might argue that as designers that we have those skills, but then we shouldn’t rely so heavily on placeholder content in our designs.

There’s a lot we can learn from traditional advertising here. In advertising, copywriters often drive the creative process. Their skills with communications and persuasive messaging are often unparalleled within an agency. We’re at a point now where usability is table stakes, and persuasion and message is necessary to differentiate products. In fact, some leading companies are beginning to recognize this change and develop tools and/or POVs on this topic (See Eric Schaffer’s article, “Beyond Usability; designing web sites for persuasion, emotion, and trust” and Forrester Research’s report, “Use Persuasive Content to Improve the Customer Experience”).

Design artifacts rarely include “real” content

I understand the need for lorem ipsum text and placeholder imagery. I am an information architect, after all. When working on an overarching framework for a web experience and creating a flexible design system, it makes sense to start with concepts and relationships, and to establish the right models and structures first. However, the more we start illustrating these concepts at the page level, the more we must concern ourselves with content and the overall message we want to create. By relying too heavily on placeholder text and graphics, we begin to communicate a level of reality that is problematic. It’s at this point in the process that the actual content should be considered and where our design deliverables should communicate these details.

Obviously, exploration of visual styles, hierarchy, and the overall visual language is crucial at this stage. That said, effective content to support those elements is absolutely essential for design success. The content works in conjunction with our visual language and style to help people move through and understand the information space they’re in. The more the design and content can be explored, iterated, and finalized together during this phase, the fewer problems we’ll encounter when the site goes live. Dr. Browyn Jones said it best in her 2007 article, titled Better Writing Through Design:

“Ideally, you should work with a writer from day one to design the voice of the copy in conjunction with the visual language of the site. And getting a writer involved early can help you solve lots of other problems—from content strategy issues to information architecture snags. Remember that writers are creatives too, and they are, in many cases, the keepers of the content your design ultimately serves.”

Lack of value assigned to content

When taken as a whole, the general perception is that content teams are production teams and therefore non-creative. Taken as a whole, content teams are typically highly focused on production and publishing issues. An unfortunate side effect is that these individuals are brought in much too late in the process, immediately playing catch-up, and trying to understand the bigger design decisions that were made. In many cases, the only information that they have to go on is a lot of ‘lorem ipsum’ or other placeholder content.

What Designers Can Do to Address these Problems

As a design community the first thing we can do is recognize the problem and want to fix it. I’d suggest that we look at it selfishly at first, realizing that if content fails, our designs fail. Period. There are a number of tactical things we can do with every project to mitigate the risks.

1. Rethink the need for specific content

Do you really need that introductory text? What about those thumbnail images? What will those elements really accomplish for your design? Are they necessary? Many of the content components we include don’t contribute to design goals or the users ability to perform a task. Simply remove those from the design entirely. The more concrete we are about what is and isn’t open for interpretation (or worse, misrepresentation) the fewer surprises we’ll see in those functional environments.

2. Explore Information Graphics & Visualizations

Take a step back from your designs and see what information can be communicated more effectively using visualizations and/or informational graphics. Let the user’s ‘scanning’ behavior work to your advantage. What can be communicated better with simple imagery than with text? How can that general concept be applied to your overall design paradigm? This critical extra step will improve and streamline the user experience. If you’re not the best person to create these assets, bounce your ideas off of the visual designers and production artists. Reviewing your own work this way will dramatically improve your design. As a bonus, the more perspectives you hear during this process, the better informed you’ll be to solve the design problem.

3. Write (some) content

If you can’t get a copywriter or content expert working with you from day one, spend some time writing draft content or sketching actual imagery and place it into your design artifacts. The goal isn’t to be perfect, but to communicate to stakeholders and partners the intent behind a particular content element or component. Bring the design to life and create actual content, headlines, text, instructions, headers, and imagery. Force feedback on those elements at the same time This will force you to think through the necessity of the content, the importance of the message, and force the same thought from your stakeholders. This means using lorem ipsum sparingly, particularly when designing critical web pages or elements that significantly impact the experience. Don’t rely on someone else to do it without first thinking hard about it yourself.

4. (Really) Collaborate with your content partners

The collaboration that we demand from developers should parallel those we have with our content partners: copywriters, strategists, production artists.

The collaboration that we demand from developers should parallel those we have with our content partners: copywriters, strategists, production artists. Often times, the content teams or copywriters are working with brand, marketing, or product teams on the creation of ‘final’ content. They understand what those teams need to accomplish and what they’re trying to communicate. Rather than have that process happen without your oversight, get involved early and often with these people and describe your vision, solicit their input, and ask for help clarifying your message and assumptions. This back and forth (like the one we expect to have with development) needs to happen with our content partners as well. Become friends with them. Remember, their skills at persuasion, messaging, branding, and simply overall writing prowess can only improve our designs.

5. Package real content with the visual mock-ups

Whether it’s visual comps, or a prototype, it’s important that whomever is responsible for creating and approving the content is actually involved with the visual designer and prototyper as they ‘package’ that deliverable. It’s impossible to fully evaluate the effectiveness of a web experience without having the content represented and under the same microscope as the design. Brand, product, and even training teams all have their own perspectives about what the content must communicate and are contributing to its development and we don’t want our design to fall apart once this ’collaborative’ writing process starts. Assign accountability to content upfront and place content professionals under the same creative deadlines you’re marching to.

There are a variety of tools and software emerging that can help you work with content. For example, Adobe InCopy hooks into Adobe InDesign. It’s just a matter of time before we start seeing integration points with Photoshop and other standard web design software and tools. But even without formal tools, the important step is that ‘real’ content is represented and tells a more complete story about the design you want to put out there.

Conclusion

It’s up to you to assess whether these content gaps are a problem in your design environment or not. Admittedly, this problem is more applicable to larger web sites and online businesses given variety of stakeholders (read: opinions). That doesn’t mean that these concepts don’t apply to the social web, or smaller marketing or micro web-sites. They do. It’s just that how critical this issue is depends on the size and scope of the website or application you’re designing.

This problem is common in many organizations (small and large). As a design community, we hold the power to 1.) change how we think about content, 2.) bring other roles into our processes, and 3.) change how we communicate with stakeholders and partners. Collaboration is what we strived for when developers shut us out, now it’s our turn to open up and let our content partners in and build even better experiences for our customers.

Getting a Form’s Structure Right

by:   |  Posted on

iTunes     Download    Del.icio.us     Pod-safe music generously provided by Sonic Blue

banda_headphones_sm.gif I had the opportunity to speak with Afshan Kirmani on her article, Getting a Form’s Structure Right: Designing Usable Online Email Applications Part 1. We talk about the design of an online web based application. Part 1 of the series focuses on the web based form where the user experience is critical before the user enters the application. The various aspects include a good entry point into a form which determines if users stay or leave. The beginning of every form is most important as details like usability set your apart from your competitors.

We further talk about…

Affordance
Good entry points into a web based form include a clear path for users to move ahead from the path of contact to the actual entry into the form. Afshan goes on to also elaborate on products and services that are compared to create a good lure into the form.

Orientation
Afshan talks about the various aspects of orientation where an interface should determine where you at a particular point in time. Afshan elaborates on the importance of a progress indicator with respect to its placement and usage.

Chunking
Talking about cognitive terminologies like Chunking, Afshan goes on to apply her background to the field of interface design. She emphasizes on the need to group information in a context that is perceivable by end users.

Trust and Online Safety
Trust is a major factor that allows prospects to move ahead and become loyal customers. Talking about elements of trust on a website, Afshan probes into various aspects like security, taking a tour, an overview of what’s to come and language aid.

Wayfinding
With data being bombarded into our lives, the topic of wayfinding seems to become an important discussion for all. Afshan talks about it by providing examples from her everyday life.

User Experience Model (Summary Diagram)
Afshan describes a model that involves the working of a user’s mental model, experience and expectations. When mixed well together, this model leads to a positive user experience of a web based form.

Part 2 of the Article
As mentioned in Part 1, the next part of this article will focus on the designer’s role in the process of creating the form’s structure, layout, segmentation, widgets, color schemes, formatting, alignment, and consistency.

Photos for interaction

by:   |  Posted on

When developing user interfaces, designers increasingly use custom graphical elements. As the web browser becomes basic technology for software interfaces, more and more elements derived from graphic and web design replace the traditional desktop approaches to the concrete design of human-computer interfaces.

In the near future, this development will become even more relevant. The barrier between web pages and desktop software is beginning to disappear, and modern rich client user interface technologies such as Silverlight/WPF, Air, or Java FX enables designers to take the control over the whole user experience of a software product. Style guides for operating systems like MacOS or Windows become less important because software products are available on multiple platforms, incorporating the same custom design independently from OS-specific style guides. Software companies and other parties involved begin to use the power of a distinct visual design to express both their brand identity and custom interactive design solutions to the users.

While this implies a new freedom for designers working in the field of interactive software products, it strengthens the importance of visual design for the design of user interfaces. Designers working on concrete graphic solutions for a specific interface are breaking away from established standards defined by a software vendor. It is now the responsibility of those user interface designers to choose graphical elements wisely to make a product’s interaction principles visible and usable.

Elements of interactive visual design

Following the roots of visual design in print and online communication, the design of a visually compelling and functional application must take into account different requirements, even though it takes the same methods to realize its goals: A dynamic visualization of the interactive product in form of text, images, and colors. In contrast to pure one-way communication design striving to create identity and media, the main goal of such a design process for interactive products is much closer to product or industrial design — namely the creation of a product that serves the user in a optimal way. It requires a strong collaboration with the disciplines of interaction design, software development, and product management.

The role of photography in software user interfaces

Photography has both challenges and opportunities as graphical element in user interface design. I chose photography as an example for a classic communication design instrument,  but the ideas are also applicable to typography, illustration, motion design, graphics, and the like. One important aspect of these thoughts is the required collaboration between the different design disciplines involved in the creation of a user experience, and how to optimize team performance for most valuable ideas and outcomes.

Case 1: Photography as content

In software applications, photography in most cases is used as content element, since photos express situations of human life very well and thus are well suited to capture and represent a certain message. The images have a semantic meaning, communicating information to the viewer and user of the respective web or software application.

Examples for this type of application can be found not only in private photo collection software such as iPhoto but also in enterprise content management solutions for web sites and product catalogues, or the web shop itself. To the user, the photo is not an element of decoration or design, but it is the actual content or a part of it.

On the visual design side, the challenge is to present this content in a way that makes it visible and reveals context and meaning. Photographic content tends to come to the fore due to its strong graphical impact, so other elements should be designed to support that effect and not to compete with it for the viewer’s attention.

The challenge of well-representing imagery content elements in a user interface is often to provide adequate metadata-driven tools to allow enhancing images with meaning; take tagging people at Facebook as an example, which turns photos into something findable. Finding a a meaningful visual representation of photographic content and this data is a common challenge to visual design and information architecture.

Case 2: Photography as design element

While the use of photography as a design element in user interfaces is rather new, there is a long tradition of using photography as a design element in advertising-related online media. This treatment as design element follows the rules of brand communication and takes photography as integral element of the web site design.

But contrary to its usage as a content element, the image is used in web design as a medium to communicate a message to the user in order to create a certain context for the real content. Some sites, such as financial institutions or software suppliers, are working with stock-like photography showing photos of people or buildings, while other businesses can combine site content and corporate communication in one image, like on fashion sites.

Benetton Web Site

Benetton uses the photo on their home page to convey both a product and a brand message to the visitors. The photo is in the focus, but is receipt more like a visual expression of emotion than as actual site content. The web design uses the photo like an advertisement would do: It is part of the site’s visual design and has been chosen by the designers. The product, derived from the site’s content, is turned into the medium to make an impression to the visitor.

Photography in interactive media is often a trigger for engagement and interaction. Interaction designers working on the product’s interaction flows can thus provide visual designers with key information to select and apply visual elements, in order to start the conversation, and keep it alive.

3. Photography in software UI Design

Unlike other digital products, the visible part of software usually makes no significant use of photography by means of communication design. Today’s desktop software interfaces consist of text, rectangle areas, and icons, along with with a lot of transparency or 3D effects. If not a necessary content element, photos are only used in splash screens of desktop applications.

In web interfaces, static images in header bars are quite common, resulting from the "hybrid" characteristics of those applications between a software product and a web site. In most cases, the photo serves as decorative element with no semantic meaning and is thus reduced to a very small amount of space of the screen; it is not important for the product’s original purpose. This is done in order to provide as much space as possible for the informational content that is useful to the user.

SAP Enterprise Portal

The image above shows SAP’s enterprise portal product in a standard visual design. The small photo showing a bridge in the header bar is part of the UI design, while the images at the bottom are content elements related to the text messages.

Like in web design, the image is used here as an element of design but loses all its visual power due to its jammed position in a design that puts all emphasis on the representation of information. The "mise en scène" of the interface suffers from the poor integration of the photographic element, totally separated from all information. Its meaning in the application context is reduced to a vague bridge metaphor referring to the function of a portal.

The best of both worlds: towards a new quality

With every release, software providers make a step towards a custom graphical representation and improve the visual design quality of their products. To take a real advantage of photography as a medium, there is a need to treat it differently than it is done today in the software industry.

At same time, a lot of effort is being made to make applications more "shiny and glossy", to better imitate real world structures on the screen. Sometimes, like in current reporting tools for business intelligence, this additional glitter reduces the visual perception of information instead of enhancing it.

The following examples and recommendations are not always easy to follow, because a meaningful integration of this medium in a UI design that centers around representation of information and providing a tool for efficient usage is a difficult task. Nonetheless, visual elements such as photography have the power to reveal a message instantly and powerfully to the user to complete and to establish a visual identity. Designers should use these possibilities to trigger the user’s attention to support a holistic interaction design and not to distract her by decorative elements and visual clutter.

Examples for photography in interactive applications

Designklicks Designklicks

This example screenshot shows Designklicks (now seen.by), a German website that collects and tags user-generated imagery. Just like Flickr and other photo-centric web sites, the images are in the focus of the design and are visually strictly separated from other design elements like icons, logos, buttons, and links. For a visual representation of the complex information architecture, it allows the user to sort and present the content in different ways, from a simple grid to a navigable 3D space.

Space by the Barbarian Group for Getty
Space by the Barbarian Group for Getty Space by the Barbarian Group for Getty

These screens are taken from an art project for gettyImages, done by the barbarian group. It uses widescreen photos to build a three-dimensional flow of cascaded rooms, connected to each other by graphical signage elements appearing in the images.

Société Générale Customer Portal

The bank Société Générale used a photo as main art on their web site, emphasizing the fact that they address everyone with their services. The main navigation appearing on the start page is embedded into the photo, but at the same time arranged in a clearly separated layer above the image.

VDW Fine Art Website

Photography is the main design element of Van De Weghe Fine Art, an art gallery in New York. All graphic design elements remain very reduced while the full screen photo is used to create a virtual room for information and interaction.

Take the blinkers off, and think about experiences as a whole

People in the roles of information architects or interaction designers tend to concentrate on their part of the job and leave subsequent visual decisions to the graphic or visual designers, which is of course always a good way to start. Nevertheless, all designers (including the two disciplines mentioned before) should be able to actively think about and contribute to the concrete, sensual appearance of the final product, since this is what design is all about.

So why posting this on a site dedicated to the "design behind the design"? Because interaction designers and information architects have become strong conceptual thinkers, driving an experience in terms of concept as well as it’s soul.  Visual design should enhance and implement this vision, which is in fact in most cases the contratry of "making things pretty."

Recommendations for photography in next-generation interfaces

  • Integrate the images into the interaction design. This can be achieved by making areas responsive to user behaviour, enhancing its function from a visual element to an instrument of interaction. Due to its realistic and nonverbal nature, photography can be equally or more powerful than icons, buttons or other classic interface elements.
  • Work with screen space. Place images in a way that they have a real impact on the overall appearance instead of putting them into small banner-like screen areas.
  • Photography invokes an emotional reaction and has the capability to create a certain ambiance more easily than other media. Use pictures that make the user feel comfortable and adequate to the application context.
  • Clarity, structure, movement, separation, union – photos can convey messages instantly to the viewer, by means of blur, motion, composition, and of course motive. Work with these as design elements.
  • If used as content element, think about alternatives to simply placing photography on a grid. There are a lot of possibilities to make images "tangible" to the user. Think of multiple layers, movable objects, or 3D approaches.
  • Keep the subject of the application and the nature of the content in mind while designing. Choose photos that convey a real meaning and make sense in the application context. Avoid standard (stock) images or those with only decorative function. Prefer custom-made images tailored to your intentions and requirements.
  • Combine and integrate all elements to create a holistic interface design where all visual elements work together and make the interface.

See also:

Interactive Identity: Bridging Corporate Identity and Enterprise IT
Visible Narratives: Understanding Visual Organization by Luke Wroblewski
10 ways by gettyImages
seen.by

Coming soon:
Part II – Typography in User Interface Design