Bringing UX to a Startup

Over the last few years the meaning of user experience shifted from ‘making pretty websites and mobile apps’ to ‘key business strategy.’ Yet, while many organizations recognize the value of investing in user experience, many struggle to deliver it effectively within set timelines and budgets. The secret to success lies in understanding key user experience activities, their outcomes and value in the product development cycle. This talk will cover:

– What are the key user experience activities?
– What are the outcomes of key user experience activities?
– When should each user experience activity be performed?
– Who should perform different user experience activities?

This talk was presented at University of Illinois Research Park/EnterpriseWorks in April 2017

Building Blocks of Good Graphs

Selecting an appropriate chart type to present data visually is one of three critical steps to creating an effective visual vessel of information. The second step requires that supporting details about the data are provided. Axis labels, legends, units and other elements deliver the context within which to interpret results. Lack of such details requires the audience to make assumptions about the data, or utterly confuses them; in either case, it is a failure of clear communication. Here we discuss the building blocks of graphs, how to implement them effectively, and illustrate suggestions with a couple of examples. In the figure above, inspired by Stephen Few, we illustrate the many different elements that compose various charts and which we reference in our current discussion.

Core elements

Axis, category and unit labels

Axes reflect what kind of information is presented and ought to be labeled. Numerical axis labels should include the units a data are measured in. For example, if company revenue across different continents is reported, do the numbers represent profit in dollars, yen, rubles, or some other currency? When a measure from a standard tool, such as a Net Promoter Score or System Usability Scale (SUS), is reported, the metric should be referenced in the axis label in lieu of units.

Axis that represents data category does not necessarily need an axis label, but must include category labels if more than one data point is shown. For instance, if monthly revenue is presented, months would serve as category labels for each numerical value shown in the chart while axis label (“Months”) can be omitted. When a single data point is shown, either an axis or a category label is sufficient. See elements B through G on the figure above.

Scale, numerical axis and tick marks

A scale divides an axis into equal segments, and tick marks denote those even segments of the scale. Tick marks on quantitative scales establish where on the axis specific number values are placed. Intervals that are nice round numbers, such as 10s or 100s, make it easy to read the chart. Tick marks should be designed to minimize visual clutter while still allowing the reader to quickly reference a data point to its value. A good test for too few tick marks is whether the audience can quickly and easily extract (an approximate) value of a particular data element in the chart. If not, then the number of tick marks should be increased.

With very few exceptions, numerical axis should always include 0 for appropriate representation of values. Manipulating the size of scale increments and its minimum and maximum points will distort the data. If the goal is to demonstrate a difference between data points, appropriate statistical procedures instead of manipulation of numerical axes should be used for supporting evidence.

Tick marks are also used on categorical axes. However, because category labels already denote distinct data points, tick marks serve no additional purpose and should be eliminated to reduce visual clutter. See elements G and J on the figure above.

Legend

When more than one category of data is presented in a chart, a legend informs what different colors or patterns represent. Occasionally, variables are labeled directly on the chart, omitting the need for a legend. Line graphs can often be shown without a legend by labeling categories next to the lines that are used to represent them. However, the choice to label categories directly on the graph should be made after considering data and graph design complexity; because a legend reduces visual clutter, it often is a better choice than labeling categories on a chart. A legend can be omitted when a single category is shown and category labels are used to describe the data.

Legends should be placed closely enough to the data components for easy reference, but in a way that does not interfere with the data shown. Moreover, because they serve a supporting role to the graph, legends should be designed to look less prominent than data elements. For example, they should have no borders around them and should be fairly small while still legible. See element H on the figure above.

Chart title

The title communicates what information is presented in the chart. An effectively worded title removes the need for a subtitle that can visually clutter the chart. Whenever possible, the title should serve as the main takeaway of the data rather than a general description of what is shown in the graph. For example, while “Mobile device breakdown in Houston” informs the reader what the data are, the title “Majority of Houston residents have iPhones” expands that description into a summary of results. Titles are typically placed at the top of the graph and should be positioned closely to the information they describe without interfering with it. See element A on the figure above.

Garnishments

Graphs occasionally include additional elements, such as confidence intervals or data labels, that may not be necessary in every instance. When designing the chart, consider whether these components serve any real purpose, or whether they only add visual clutter.

Grid lines

Tick marks are usually sufficient to reference a data point to its value when graphs are fairly simple and show a small set of data. However, when charts are wide and contain large sets of data, grid lines help guide the eye between data categories and their numerical values. In large graphs, grid lines also help increase precision. Moreover, grid lines can be used when the goal is to highlight small differences between data values. In the cases where grid lines are used, they should be designed to appear less prominent than the data, and used sparingly to avoid visual clutter in the graph. See element L on the figure.

Reference lines and zones

A reference line or zone can provide context for the data by visually comparing it to some predetermined value. Reference lines or zones are especially useful when the goal is to show data deviations from the norm or to highlight that a benchmark was met or surpassed. For instance, when presenting a software usability score (as measured by SUS) to a stakeholder who is unfamiliar with the metric, highlighting the desirable range for such scores will help her meaningfully evaluate the reported results.

Reference lines can also be used to highlight significant events during the period of data recording that may have impacted the results. For example, e-commerce website traffic may significantly increase at the start of a marketing campaign and drop off soon after the campaign wraps up; marking such an event on a website traffic report can help stakeholders make informed business decisions about their marketing strategy and website. See element M on the figure above.

Trend lines

A trend line on a graph shows an overall change in the pattern of data across time or some other variable represented by the horizontal axis. Trend lines can be useful for highlighting a pattern in the data that may otherwise be obscured by individual data points. For example, if a particular stock price varies drastically over a period of time, it might be hard to gauge whether overall its performance is improving. A trend line, in this case, could show a decline, improvement, or no change in price over time. However, if data points themselves already show a clear pattern, then trend lines only add visual clutter and should be omitted from the graph. If trend lines are used, and if the overall pattern of data is the main takeaway of the chart, the trend line should be visually highlighted as more important than individual data. Alternately, if the trend line is secondary to the graph, it should be visually subtle. See element K on the figure above.

Ranges and error bars

In some cases, variations in data values, as reflected by such measures as standard deviation or confidence interval, may be required in the graph. Visually, a range or an error bar is shown as a horizontal or vertical line extending past the data point. Whether such detail ought to be included in the chart is dictated by research methods, statistical analyses, type of data reported, and by the message the graph is expected to communicate. If the range of values is more important than individual data points, then error bars should be visually prominent. Otherwise, error bars ought to be subtle.

Data labels

Data labels show specific value information for each data point on the chart. The purpose of graphs is to visually showcase patterns in the data and not to communicate numerical precision; tables are much better suited for this goal. Therefore, as tick marks on a numerical scale and grid lines already allow to quickly reference data points to their values, data labels are redundant and add visual clutter to the chart. In the rare case when numerical data are presented on a chart without a quantitative axis, data labels can be used. In such instances, ensure that numbers are rounded up to reduce precision when it is not necessary, and position data labels relative to the data points in a way that makes it easy to read and reference the information quickly without cluttering the chart. See element N on the figure above.

Do’s and don’ts in practice

Many options in terms of chart type, layout, style, and supporting elements are available. Here we illustrate a couple use cases for poor and improved graph design.


Bar charts

Case 1: Bar graph

Axis and chart titles on the right side graph provide focused information about what the data show. Specifically, the good graph specifies that preference ratings were measured on a scale from 0 to 10. Additionally, the title on the right summarizes data in a single takeaway message. As shown on the left side graph, slanted category labels can create a rough visual edge, especially when label length varies, and can be harder to read than horizontally placed labels; whenever possible, opt for the latter. Because only three data points are represented, it is easy to extract their values by referencing the numerical axis. In the example on the left, the grid lines add unnecessary visual clutter and can be completely removed from the graph. Additionally, the scale on the numerical axis can be simplified and include tick marks for every 2 rather than every 1 point. Finally, error bars on the right side graph are less visually salient than on the left, but still provide information about variability in preference ratings in the sample.


 

Line-Graph-1024x371

Case 2: Line graph

As in the previous example, the graph on the right has more descriptive axis and chart titles that provide focused information about presented data. A reference line on the right indicates occurrence of a business event that provides additional context within which the audience can interpret data. Data labels clutter the chart on the left side and are not really necessary. As shown on the right side, each data point can be quickly aligned with its value by using the grid lines. The scale on the numerical axis can also be adjusted to show larger scale increments. Tick marks on the categorical axis, as shown on the left, serve no purpose and can be removed to reduce visual clutter. Circles on the right graph highlight exactly where on the line the data points are placed, and allow an easy reference between a point and a month it is associated with on the categorical axis. Finally, labeling data directly on the chart removes the need for a legend and reduces visual clutter.

To conclude

Once the appropriate chart type to present data visually is selected and supporting details about the data are provided, the last step in effective visual communication with graphs is to carefully design these charts. Design ensures not only that the graphs look aesthetically appealing, but also, and more importantly, that the intended message is communicated. For example, color or texture can be used to highlight a particular data value from a larger set. Similarly, a color gradient can emphasize change in data, such as increase or decrease in cost of operations at a business, over time. A poorly designed chart may not only fail to communicate the intended message, but may also mislead the audience. In the business realm, visualized data are used to inform decisions; hence, graphs that are unclear or misleading can negatively impact operations and the bottom line. Successful data visualization stems from the synthesis of appropriate research methods, analysis, and keen application of design principles.

This blog post was originally published here

4 Tips for Better Data Visualization on Mobile Devices

Demand for data visualization on mobile devices is on the rise, both in the consumer and business spaces. Whether it is stock price performance or sensor fluctuations in a production plant, data in enterprise helps in monitoring operations, optimizing processes and quickly making informed decisions. One of the challenges in providing uninterrupted access to visualized information is the drastic reduction in screen size when moving from a desktop or laptop to a tablet or a smartphone. Best practices for print or large screen graph presentations are unsuitable: chart titles, axis labels, and other graph elements on a small screen are clutter rather than useful information. Nonetheless, effective data visualization on mobile devices can be accomplished by following these recommendations.

1. Determine what your users need

Before starting graph design for a mobile screen, gather particulars about what kind of data and what kind of format should be presented so that the charts best meet your users’ needs. For example, while temperature data are typically presented on line graphs, a user who really needs to know only how today’s temperature compares to tomorrow’s forecast might be completely satisfied by a numerical representation of a few data points rather than an actual chart. Understanding how users utilize information rather than in what form they expect to see the data will give designers more freedom to explore functional solutions to the problem.

2. Reduce standard graphs to bare bones

Visualized data, when accessed on a mobile device, are typically part of an app that was built for a specific function. For example, various banking apps show user account balances, pending payments and even breakdowns of various spending categories. When a user engages with an app, she has a specific purpose which provides context to the data that will be accessed. For that reason, graph titles, axis labels and other supporting elements can usually be omitted.

3. Take advantage of mobile device capabilities

Mobile device as a data display platform is great for interactive graphs. First, screen orientation (portrait vs. landscape) affords different pros and cons for chart displays. While portrait mode may work very well for a bar chart with a few data points, landscape mode is superior for line graphs. Second, interactions with the graph offer numerous opportunities to provide the user with detailed information that he may need while avoiding clutter on the screen. For example, pinching and zooming on a line graph could show the user changes in data over different periods of time, affording a historical glimpse of the trend as well as a very close look at data over the last hour. Similarly, tapping on individual bar graphs could bring up a modal containing a precise data label for the value.

Moreover, isolating a data point from a graph could give user access to detailed information about the data, allow her to take specific actions such as forward data to a colleague, attach a note, print graph and so on. Alternatively, a drawer that contains detailed information and slides onto the screen from the side of the graph is a good way to avoid visual clutter while increasing data density and preserving more specific information. Here, the user would only need to tap on a point in the graph to access details.

4. Follow design best practices

When designing the chart for a mobile app, especially when it is meant to support business processes or tasks, it is critical that information is legible for users given their work conditions. For example, if app users work on day and night shifts, the graph design should accommodate different lighting conditions for this group. Graphs with higher contrast work best in varying light conditions. Charts that contain multiple data sets (more than one line, for instance) require even greater contrast as two lines of similar hue may be indistinguishable from one another on the device screen.

Additionally, typography should follow the information hierarchy using appropriate size and weight for the level of importance. Avoid compressed type used in print materials as it will be more difficult to read. Similarly, avoid creating interactive graph elements that are smaller than suggested by guidelines for tappable areas. Moreover, assess how modals and pop-ups that are used to supplement graphs affect the users’ ability to extract meaningful information. Conducting a usability test with the graph and measuring the Standard Usability Score (SUS) will help ensure that visualized data meets users needs effectively.

In conclusion

User research should inform design requirements for data visualization. By stripping down graphs that are typically made for print and large screen presentations to their bare bones, you will be able to reduce chart clutter and help your users to better comprehend the presented information. Taking full advantage of the interactions available on mobile devices and weighing the pros and cons of various graphing libraries available to the developers will help ensure that the graph will be interesting, engaging, and, most importantly, informative to your users.

This blog post was written with Stuart Conway and originally published here.

ROI of UX: Mozilla Support Site Redesign

Nielsen Norman Group recently shared a great case study showing return on investment of utilizing user-centered design and usability testing for a website redesign. Take-aways are:

  • Mozilla support website redesign took 560 hours (or 14 weeks)
  • Multiple UX research methods uncovered pain points and areas for improvement
  • Designs were tested as prototypes and improved based on user feedback; 7 versions were assessed during project lifecycle
  • As a result, there was a 70% decrease in support questions submitted, and
  • 80-90% of submitted questions were answered within 24 hrs, an increase from 40-60% rate before re-design

 

Visualized Data Helps Drive Decisions: A Primer on Chart Types

 

Information drives decision-making, especially in the business world. When multiple parties are engaged in collecting intelligence, synthesizing data and determining actionable items based on results, effective ways of communicating information are critical. First, it is imperative that data are collected and synthesized using appropriate procedures. Second, it is crucial that results are summarized and presented in an accessible manner. Visualized data is one of the most effective ways to communicate insights from information and spur decision-making.

The basics of graphing data as well as core design principles can help translate quantitative and qualitative data sets into vessels of brief take-away messages. The most common types of charts are bar and column graphs, as well as pie and line charts.

Bar charts allow viewers to visually compare values across multiple categories. Because these charts present data in horizontal bars, they are especially handy when the number of categories is large or the category labels are long.

  • Good use case: Revenue generated by each member of the sales team (assuming the sales team is reasonably small).
  • Bad use case: Regional temperature averages for every month of the year. A line graph would be more appropriate here. 

Column charts, like bar graphs, allow viewers to compare values across categories. Here, however, the bars are positioned vertically rather than horizontally. Column charts are particularly useful when negative and positive values need to be represented, a handful of data points are shown, and labels of categories are short.

  • Good use case: Company revenue across the four quarters of a year.
  • Bad use case: Population across every state in the US. Here, a bar graph or even a table would be more appropriate.

Pie charts should be used to represent proportional relation between several values in a single category. Here, quantitative information is converted to percent values that add up to no more and no less than 100%.

  • Good use case: Mobile device operating system breakdown in a city (e.g. 58% iOS, 36% Android, 4% Windows, 2% Other)
  • Bad use case: Average duration of calls to the Help Desk at a business. Here, a bar or column chart would be most appropriate. Here is another example of a poor pie chart use.

Line charts are best for showing changes in data over time. A line graph can contain several sets of data, allowing the reader to compare them across time, such as company profits and cost of operations. However, multiple series of data should be presented with caution; otherwise, a reader will infer a presence or absence of a relation between visualized data that does not actually exist (see excellent examples of this problem here). Research methods should inform if and when plotting multiple series of data in a line graph is appropriate.

  • Good use case: Coffee consumption rates per department at a company during 2014.
  • Bad use case: Scores on tests measuring different variables (e.g. aesthetic appeal, ease-of-use, and level of an innovation of a website) at a single point in time. Here, a column chart would be appropriate.

Although these are the four most commonly encountered charts, their variants, such as stacked column graphs, bubble charts and treemaps also exist. These alternative chart types have their own specific use cases and should be selected only after carefully considering what type of visualization is most appropriate for the research method used to gather the data, and what insights the chart must communicate. If the amount of information that must be displayed exceeds the capabilities of these standard graphs, often the best practice is to break the data down into simpler, more easily absorbed sections. In most instances, the simplicity of design and clarity of information conveyed by a carefully chosen standard graph cannot be surpassed by their more complex variants.

 

This blog post was originally published here. 

ROI of UX: Discussion Forum Redesign

I do not need to convince my colleagues of the value of user research, usability testing and overall focus on meeting user needs during product development cycle. They get it: satisfied users are good for business! Yet, stakeholders regularly demand case studies and hard numbers before opening purse strings to fund a project. As a result, I am collecting (and sharing) UX success stories to help evangelize on value of UX and to make future “battles” for funding shorter, less intense, and (fingers crossed!) extinct!


Redesign of BreastCancer.org website based on user testing lead to the following return on investment:

  • 117% increase in unique website visitors
  • 41% increase in new user registrations
  • 53% reduction in duration of registration process
  • 206% increase in number of daily posts
  • 80% decrease in number of Help Desk support cases
  • 69% decrease in Help Desk cost

These are pretty nice numbers! You can read the full report here.

 

Color, Culture and User Experience

Artists and designers often talk about different emotions that colors elicit, and suggest specific use for them in mobile app and web designs. Interestingly, across cultures different colors can be associated with very distinct emotions. For example, while anger is represented by red in the Western world, it is depicted as black in Hindu culture. Love is yellow to Native Americans and blue to Africans! So, while crafting away at the next project, keep these cultural flavors in mind. David McCandless has created a handy color-culture reference!