Interaction design is one of the complex stages of the design process which involves the organization of the information i.e. where to place design elements on a layout. Apart from this we also deal with other factors like technical limitations, diverse user needs, and one among them is an individual’s design biases. When designing a layout, as designers we often become biased towards creating certain design that we have come across or something that we have used ourselves a user. It can also happen in a team with other designers or with a client where we hear them mentioning “I want apple like design”, “I want the same experience as Amazon” which may or may not fit to the context of what we are designing. Dealing with above complexities often detracts us from the emphasis on meeting the needs of target users. So how to create factual design without any designer’s bias that caters to our target users?
One way of doing this is by quantifying the design itself, but how? I tried a simple method and let’s see this step by step.
1.Make feature cards:
Let’s assume we have this set of features/requirements which were outcome of initial research/ideation. Create cards with the feature printed on it (for our example let’s think of features ranging from A, B, C…. E which makes a total of 7 cards
2.Prepare the layout:
Take a blank page and split the entire page into a 4 sections and assign scores ranging from 0-4 starting top to bottom reading left to right in descending order (as illustrated below). Why top-left grid gets maximum score and bottom-right grid gets least? This is based on user’s reading habit from left-to-right/top-to-bottom. Also there are many standard layout patterns in the industry which talks about which part of the page gets more attention from users and they are primarily based on people’s reading behaviors, few common ones are the NNG’s f-pattern , Gutenberg diagram, the z-pattern layout.
3.Get into action:
Now conduct session with a user and ask the user to build the website as how would they like to see it? Give them the feature cards and the grid layout without showing the scores. Users will start picking the feature cards and start arranging them across the page. Repeat the activity with more users and capture the outcome for every user, your outcomes will look something like the illustration below. Depending on where the user places each features across the page we will be able to determine the score of each and every features, which in turn helps us understand relative importance between them.
Start mapping the scores in a table as shown below and distribute the cards on the layout based on the average score arrived. For example score of ‘A’ is 3.8 and hence it falls on the top left box of the layout.
More complexity: let’s imagine that feature ‘C’ is a business requirement from the client and for client this is the most important feature. It may not be a favorite feature among user but yet we need to bring it into the design, how to bring this factor into the model that I have demonstrated above? This can be done by introducing weightage to individual feature. In the below table ‘C’ gets more weight-age than the other features. For example, weighted average of C= (4*0.2+2*0.2+4*0.2+2*0.2+3*0.2)= 3.0 follow the same formula for other features to get the weighted average of each.
This is a simple method for placement of design elements across the page. But at-least gives a head start for the design process and what goes into each feature and what experience each of these elements follow is still left to the decision of the designer.