Designing a new way to create and edit tables in MS Word
Part of the design challenge for Cooper
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.
Understanding the problem
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.
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
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 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
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.
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 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.
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.
From my analysis of the Word interface, the excessive distance between the user’s current mouse cursor location and menu target was an issue.
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.
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.
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.
The impact: Journey Map
Other concepts explored
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.
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.