Designing a new way to create and edit tables in MS Word

Part of the design challenge for Cooper

Concept summary

Problem Statement — Redesign the interaction and interface for creating and formatting tables in word.

Solution — Providing a way for users to quickly insert tables onto their writing canvas and edit it using local controls.

Concept video

Invision prototype

Understanding the problem

Intial whiteboarding and jotting down findings after quick research

When I looked at the ribbon interface for inserting tables, my first reaction was to think about how fluid it was. I read the brief and summarised it — come up with a new way to insert, format and adjust tables. I had the freedom to completely discard the ribbon interface or embrace it.

In order to better understand the problem with the current interface, I asked myself a few questions.

  • Why and when do people create tables?
  • How do they create tables?
  • Do people think in terms of the content or the structure of the table?
  • What does their current journey look like?

This gave me a way to have a goal when doing research.

Placing some constraints

Like many design problems, I had to have a focus. Keeping the time for the challenge in mind and in order to frame the problem in a better fashion, I started off by placing some constraints in terms of the target user group and the type of actions performed by them to edit the table.

Target user group — College students. I chose this group for a couple of reasons. One, they use documentation software a lot for school work and use tables for their projects.

Quick research goal — Study how people create, style the layout and add/delete rows/columns in a table. Based on my analysis of the word interface, editing a table’s structure were some of the prominent actions.

Research

My research was driven by two major questions:

How do people create tables in Microsoft Word and on Paper? In order to really understand how people think when they are tasked with creating a table, I asked them to create tables on paper apart from creating them in word as well.

How do people style and edit rows/columns tables in Microsoft Word? To find potential opportunities and problem spaces, I understood how people create, style and edit tables in MS Word using the various options available to them.

Understanding the user

I gave users a notebook and pen to go through the process of creating tables on paper

When asked to create table on paper…

  • People think in terms of the content first when they are tasked with creating a table.
  • They write down the row labels and columns and then draw lines around it when creating tables on paper.

Selecting a layout and editing the table

  • Users found it fairly easy to change the theme/layout of the table after creating it.
  • When asked to add/delete a row, most users went looking for a one-click option to do the same in the right-click menu.
  • Users struggled to select a row or column in the table. None discovered the ability to quickly select rows and columns from around the table.
  • The layout option (in the ribbon) wasn’t discovered easily.

Analysis of the insert mechanism

The insert table menu in Word

The current approach by all means is well designed as it is very fluid and uses visual feedback effectively. However in my research, I observed two negatives to this interaction mechanism:

  • There is some precision required in the mouse hover action when selecting the cells in the grid. Not that it is any bad, but adding an extra row or column (or less) by mistake could lead to additional work since adding or deleting rows is not really straightforward once the table is created.
  • Users go through a mental calculation with respect to the number of rows or columns required as they perform this action. This leads to a cognitive load, although a minor one.

Exploration of other products

From left: Apple Pages with its style first approach, local controls in Pages and the quick insert menu in Medium

Assumptions

I had to place a few constraints and make certain assumptions in order to come up with the concepts and keep my work focused.

Not a replacement of current controls

The new design is not necessarily a replacement of the existing insert menu or any other editing controls in the ribbon, but only surfaces the most important controls and makes them easily accessible local to the item being edited (eg. table).

Serves a content-first mindset

The new design will serve those who think in terms of content first.

Users’ lack of access to pen and paper

Not every user has all their content planned out on paper or has quick access to pen & paper to plan things out.

Key controls for editing a table

Styling the basic layout of the table and editing the row & column composition are key actions performed right after a table is created. I made this assumption after analyzing the primary controls in the current ribbon interface.

The design

To improve on the current way of inserting a table, I sketched a lot of concepts that explored the insert action both inside and outside the ribbon.

The final design I went with provides the users with a ‘quick add option’ right on the writing canvas. From here, users can add tables, shapes or charts using the menu. Once the table is added, users are provided with local controls to quickly edit the table’s structure and theme.

Quick add menu

Quick add option

One of the issues with the ribbon interface is the lack of quick access to controls, especially the ability to inserting items onto the writing canvas. This design allows the users to add common elements like tables, shapes, etc without having to look for them in the dense ribbon interface.

Right after a table is inserted using the insert menu

Content-first approach

Based on my findings from research, I took an approach where the user can simply start typing the column and header names without having to worry about the table structure.

Local controls

From my analysis of the Word interface, the excessive distance between the user’s current mouse cursor location and menu target was an issue.

Row/column counters and quick styles menu in local control cluster

Providing local controls solves this problem because it is not only easily accessible, but also works around overwhelming menu trays by providing focused, necessary options.

Anatomy of the interface when a contextual menu appears after row selection

Evolution of the design

The design evolved through different mediums and some rapid prototyping and testing.

Initial sketch on whiteboard

I sketched out multiple ideas on the whiteboard and once I was happy with a direction, I sketched it out further on paper.

Paper sketches

Paper sketches — I initially created an Adobe style modular menu structure for the insert and style options.

Initial prototype

The initial prototype with a multi-step process.

After usability testing

When I tested the initial prototype, I found that not all users cared about styling the table before editing the structure and they wanted to quickly commit the table content. In my iteration, I removed the necessity to apply a style for the user.

I was able to simplify the user flow after usability testing by moving the quick style option to the local control structure.

The impact: Journey Map

The overall steps have increased, but the number of easy steps have also increased. Also, the number of steps with a cognitive load has decreased.

Other concepts explored

Natural language

Inspired by a lot of modern applications, I was thinking of a concept where just typing in something in natural language would present people with a template of a table. Like ‘Attendance for 5 students’ will present tables suitable for that such a scenario.

Cons — Describing complex scenarios could be tricky and also editing placeholder content will be hard.

Live preview concept-1

During my research I saw that some people were trying to add table titles. I created an option with ability to add table title and get a live preview of the table being built as they modified the rows and column numbers.

Cons — This method didn’t seem as fluid as the current experience itself and wasn’t solving the problem of mentally calculating rows and columns required.

Live preview concept-2

Going back to the behavior of writing content first while creating tables on paper, this concept lets the users just type their labels and view a live preview of the table on canvas.

Cons — While visual, the vertical text areas could create confusion. Also, having the users type on the canvas seemed like a better idea.

Editing the table structure

This concept uses discreet controls that appear only when the user moves their mouse over an interface element. For example, drop-down options when hovering over a checkbox and ability to add columns/rows when hovering over area between the columns.

Cons — While easy to access, I felt that having too many hidden controls might make it really hard to reach out to the right options quickly. I decided to build further on this option and leveraged the concept of using local controls.

Reflection

This was a fun challenge to work on and while it took me some time to create the visual prototypes, I was able to go from research to ideation in a few hours. The problem statement presented a challenge with an interaction that is already pretty well done, especially the insert menu interaction. Tackling any problem with a good process; irrespective of the amount of time at hand brings about interesting design directions.


If you like what you see, please hit the ‘recommend’ button below. Also, if you’d like to chat, get in touch with me at shankar.ramanb@gmail.com. You can view some of my design work at shankarUX.com. Thanks!