Are you a Good Witch or a Bad Witch?

I’m examining the concept of Nudge theory as it is implemented in user experience design. This exercise leads us to a fundamental question about ourselves as UX designers:

 

Am I a Good Witch? or a Bad Witch? Which?

 

By the end of this post, you will have to decide.

 

The Nudge theory was codified by Richard Thaler, a behavioral economist from the University of Chicago, and Cass Sunstein, a legal scholar, in their book, Nudge, published in 2009. In the book they describe a concept in behavioral science which argues that positive reinforcement can improve good decision-making. In any given scenario, one offers all choices, good and bad, simply prioritizing the good decision options for the user without removing the options that one feels are bad choices. It’s a rather altruistic and seemingly fair approach.

This behavioral concept is based on a binary view of human thinking: the two ways in which humans think are a) reflective and logical and b) intuitive and affective. The nudger (or in our scenario, the UX designer) should know how to appeal to both types of thinking in order to deliver a positive user experience; the key goal is to gently push the user into making the best decision to help them achieve their purpose.

Okay, UX designers, here’s a quiz question for you: who has a similar theory of human behavior? Why, Don Norman, of course! This two-paned approach is directly reminiscent of Mr. Norman’s three levels of human brain processing: Reflective (conscious cognition), Behavioral (learned skills), and Visceral (immediate perception, or as Norman puts it, “the lizard brain”). In a simplistic way, Norman’s behavioral and reflective processing link to Nudge’s reflective and logical thinking, and his visceral processing relates to Nudge’s intuitive and affective thinking.

The best example of Nudge theory in action is as follows: designers painted a small fly in a strategic spot in the urinals at the Schiphol Airport in Amsterdam, and thereby reduced spillage by 80%. As Thaler and Sunstein say, “It turns out that, if you give men a target, they can’t help but aim at it.” 

Other examples of good nudges include the little signs you often find in your hotel room that encourage you to save the environment by hanging up your towels so they don’t go into the laundry. If you want to have laundered towels, you leave them on the floor. Not only does this nudge you to be virtuous, cleaning up after yourself in order to reduce water and energy consumption, but it also may make you feel a little guilty about throwing something on the floor, thus making more work for someone AND ruining the environment at the same time!


The Good Nudge in Mobile Design

There are many ways to apply the good nudge in mobile design. There are apps which encourage good sleeping habits of eight hours per night, by sounding one small alarm sending you to bed at 11:00 and another waking you up at 7:00 AM.

The iOS Health app tracks your movement (in steps and flights and distance) and politely tells you to “Sit less. Move more. Get some exercise.” (Okay, maybe it only says that to me. Maybe you are out running five miles a day.) 

The British bank HSBC created an app that helps users track how they spend their money, quantifying purchase types and reminding them that “small purchases [like coffee] can add up.” 

Hello Wallet performs the same type of good nudge, but someone there apparently is more favorable to caffeine consumption.


The debate over the beauty of the Nudge is whether it actually supports the intended libertarian ideal of freedom of choice, or is just a euphemism for psychological manipulation. In UX design, is this the gateway drug to . . . DARK PATTERNS? In Wizard-of-Oz terms, I believe that the good-nudge Witch helps the user get home to Kansas. The bad-nudge Witch just wants to sell more of those shiny ruby slippers.

But each of us gets to decide. Just as Dorothy always had the power to get back to Kansas all by herself, UX designers, you have the power in you.

Nudge for the good!

 

 

 

Design Critique: LinkedIn Profiles in “Edit” Mode

LinkedIn is a powerful professional networking tool, and the LinkedIn profile is a commonly-used, linkable online alternative for the traditional resume. The goal is to create and edit a “strong” profile that will generate interest in the user as a candidate for employers.

 

“Profile Strength” panel provides a good conceptual model

The “Profile Strength” indicator has understandability: it fills up (like water in a tank) as the user improves the effectiveness of their resume, and is reinforced by the accompaniment of a ranking term.

 

Navigation signifiers are inconsistent

Discoverability, mapping and signifier issues in “view” mode

When the user views others’ profiles in LinkedIn, the blue “Send a message” button establishes a logical constraint, i.e. to connect with another person on the site.

In profile “edit” mode (below), this same blue button is labelled “View profile as” — breaking that logical constraint by linking to a “view” mode of the user’s profile instead. This confuses the user model (it is also accompanied by a misplaced dropdown menu).

In “view” mode, discoverability is therefore weakened, causing a gulf of execution: a minimally-visible banner labeled “This is what your profile looks like to Connections” on the left, with a “Return to profile” button in the upper right, changes the conceptual model yet again. Understandability is poor, causing rule-based mistakes: users might try to return to “edit” mode using the blue button rather than the banner button.

View-mode status would be signified more successfully if mousing over the “view” screen generated an overlay ghosting out the screen details, causing the banner instructions to pop out more (and preferably, the banner and buttons would be in blue, to signify that the user is still drafting their profile): 

In return, adding this banner and ghosted overlay technique to the original edit-mode screen and changing the “Return to your profile” button to a “View your profile” button would more successfully map the navigation to “view” mode. It would essentially work as a toggle switch between modes.

A gulf of execution occurs on the “Posts” page 

When the user tries to return to their profile “home” from the “Posts” page, a logical constraint applied everywhere else — i.e. to return “home” by clicking on the head-shot photo — is not available here. Knowledge in the head is required to find the “Profile > Edit Profile” navigation in the dropdown menu. 

 

LinkedIn adds constraints to encourage users to improve their profile

The blue box asking “Is this your current position?” (above the user image) and the two white boxes “Language” and “Volunteering Opportunities” (below) are helpful signifiers to edit further in order to create a “stronger” profile. However these signifiers often reappear after the user exits and re-enters the LinkedIn site anew, even when these points had been addressed. This adds an unnecessary constraint, and if the user has already performed these tasks, a gulf of evaluation is also created.

These panels also limit the visibility of other profile content, especially on smaller screens, and would be better designed as a clickable “Improve Your Profile” button

 

Discoverability and signifiers for editing text are strong

In “edit” mode, editable text is highlighted in blue when moused over. The pencil icon that appears is an effective signifier suggesting editing. This example provides useful feedback: a pop-up box appears with clear signifiers (“Save” and “Cancel”), as seen in the second image below. Also a “Change photo” instruction appears with an understandable camera signifier.

 

All things considered, LinkedIn provides strong understandability with robust editing options in the profile “edit” mode. However some improvements would increase discoverability and minimize mistakes.

 

 

 

A Redesign Proposal for the Voorheesville Public Library Website

In order to propose a redesign for the Voorheesville Public Library’s website, we conducted a user-centered review, test, and analysis of the information architecture and interactive design of the site. It appeared to be clogged with duplicated content in an overly complex structure, and was not adapted for mobile. Our goals were to conduct research and design a more effective user experience for desktop and mobile platforms, in interactive prototypes.

The current website appears crowded and overly complex.

 Understanding Our Users

Our first step was to identify our users and test their expectations regarding public library websites. In a series of unstructured interviews, observations and surveys, we asked users what they expected to find on such a site, and to give us feedback on their experience using the site of a major public library system. We collected our respondents’ answers and synthesized the results:

Key insights:
  • A public library’s home page should be simple and clear.
  • It should be easy to find books, so headings and labels must be good signposts.
  • Users expect public libraries to create a sense of community and offer public events and support services.

Once we had determined user goals, we created personas to represent the variety of users whom we would need to keep in mind throughout the research and testing process. To further our sense of empathy with these users, we also imagined plausible scenarios in which each persona would come to the Voorheesville Public Library (VPL) website.

We created personas and user scenarios.

 Structuring the Content

The next step in our redesign process was to create a new information architecture for the VPL site by testing our assumptions through card sorts, tree tests, and competitive analyses of similar websites.

After performing a top-level content inventory of the current VPL website, we narrowed the key topics down to 32 for the card sort. Our users organized the topics under headings of their own making and delivered results we could analyze, enabling us to map key groupings and relationships.

img_2854-1Analyzing the card sort test results.

From this map we were able to create a new information architecture, which we tested with users by asking them to perform five different tasks in a tree test.

Tree test results for one of the five tasks we tested.

Key insights:
  • User results were remarkably consistent, giving us clear direction.
  • Some categorizations caused confusion in navigation, which directed us to make changes to the information architecture.
  • Some labels were unclear and misdirected our users; these required honing.
    We had to make judgment calls about the placement of certain topics which had not been included in the card sort.

 Building a site map

Next, we were ready to propose a site map. Instead of the eight navigation tabs in the current VPL site we opted for four, plus a “social media” section intended for the footer.

Feedback at this stage challenged us to make several revisions to our information architecture once again, before the next phase of testing.

Key insights:
  • We decided to move the “Account” tab up to the top level in the next iteration, instead of keeping it under “Services,” to give users more immediate access to their personal information and to create a more comprehensible five-tab navigation structure.
  • Our “Voorheesville” header was not engaging, as we had intended, so we changed it to “Local History.”
  • Users indicated that the eBooks and Audiobooks information should be under the “Services” tab.

 Understanding the Competition

We conducted a valuable analysis of competitor sites before moving into the prototyping stage. We chose to examine the designs of five public library websites from around the country, evaluating the following dimensions:

  1. Homepage and navigation
  2. Connect (social media, about, contact us)
  3. Accessing catalogs and searching the site
  4. Events, services and exhibits
  5. Appearance (typography, color choices, overall aesthetics)
Key insights:
  • We decided to design a prominent search box with options for searching both the site and the catalog.
  • An interactive calendar interface is optimal.
  • We would use a graphic design with a minimal number of fonts, stock images and colors.
  • We learned a lot about the conventions of library websites, which might have been even more useful earlier in our research process.

Concepting and Testing Prototypes

Our final goal was to create usable prototypes, based on specified user tasks. The process of creating a first prototype started with a task flow. We chose several potential scenarios, and sketched decision points and click processes.

2016-11-08-12-07-56

In this example of a task flow sketch, the user scenario was to find entertainment options on the VPL website. The user accesses the calendar to register for an event at the library.

We then conducted usability testing of two task flow scenarios, on both desktop and mobile sites, using paper prototypes.

img_3197

By testing our task flows, we learned that the overall navigation structure was clear, but some revisions were needed to improve the user experience:

  1. In the desktop version, our search box functions were not visible enough, so we decided to enlarge the box in our prototype versions.
  2. In the mobile version, top-level navigation was not found easily via the slide-over “hamburger” menu, so a three-tab navigation bar would be added to the top of the screen in the final prototype.
Key insights:
  • Sketching task flows forced us to think carefully about each step a user takes to progress through a site to meet a specific need.
  • Prototypes, intended to test functionality only, should be sketched in black and white so as not to distract users with graphic design elements.

The Final Product:

An Interactive Digital Prototype

Our final task was to create interactive prototypes for both desktop and mobile designs, with one task flow required on each platform. We chose to represent a scenario in which the user is required to register a child for the library’s summer reading program.

Desktop Wireframes

desktop-homepageDesktop homepage

Mobile Wireframes

mobile-homepageMobile homepage

Our final digital prototypes can be viewed and clicked through below:

Desktop version

Mobile version

The many stages of our research, structuring, and prototyping process gave us powerful insights into the conventions and best practices of web design, and a viable proposal for the Voorheesville Public Library.

About Us

The Dritz & Osley team: we are (left to right) Ratirat (Rey) Osiri, Cormac Fitzgerald, Kristen Droesch, and Mary Ellen Curley.