We need to talk more about UI research

When I search for User Interface (UI) research articles on Google, all the results pertain to User experience (UX) research, which according to me is very different from UI research.

Photo by Bonneval Sebastien on Unsplash

First, let's understand the difference between UI and UX?

• User Interface(UI) comprises the elements that you see on an interface and can interact with. It includes web components such as text fields, buttons, menus, cards, etc.
• User Experience (UX) is the experience of using a product or a service. It is the aspect of how a user feels after using a product. It can be both digital or physical, for eg. the experience of opening/closing an umbrella or the experience of using the My Sprint app.

Now, what do I mean by UI research?

• UI research is how you come up with the first iteration of your design. It is when you have received requirements from the PMs and need to come up with a sketch for how the flow might look like.
• UI research is also when you find out during usability testing that an element in your design is not working as intended. Or the devs tell you that they can’t use a UI element due to technical limitations. And you need to come up with a different alternative.
• The designer does this research internally to decide on the direction.

Context

I have been doing the Daily UI challenge for a few months now. It is a prompt emailed to you every day for 100 days asking you to come up with a UI for it.

Since it is supposed to be a fast design, you can’t use the typical UX research methods like usability testing, interviews, surveys, etc. to guide your design.

It replicates the phase of the UX process when the requirements are clear after user research and as a designer, you have to come up with a design.

Photo by Kelly Sikkema on Unsplash

Starting from a blank canvas could be a daunting task for many designers. But, there is a systematic way to come up with a set of wireframes that forms the basis of your final design.

First of all remember, that you are not trying to reinvent the wheel here. You are not even expected to come up with something unique or that fits all the criteria. You only have to come up with something that would help ease conversations around the design.

How to conduct UI research?

I am taking here Daily UI #47: Activity Feed, as an example challenge.

Seeing this prompt without any requirements can be nerve-wracking.

Let’s establish a systematic approach to handle this. It’s split into 4 steps.

• Brainstorming around the prompt
• Sketching initial idea
• Research
• Final sketch and wireframe

Step 1: Brainstorming around the prompt

We start by thinking about what an activity feed is and which apps have you seen using it.

Note: It doesn’t need to be correct at this point as you are writing from memory.

• An activity feed is a list of actions performed in an account by the user.
• Apps that use activity feed: Linkedin, Facebook, Instagram, Trello, Splitwise.

What purpose does an Activity feed solve in those apps?

• Facebook/Instagram/Linkedin (Social Media) — Used by the primary owner of the account to rediscover something they used a while ago. Or used by their connections to see what they are up to.
• Trello (Task Management) — To see who made a particular set of changes in the board.
• Splitwise (Way to split bills) — To keep everyone updated about the finances added.

Make a quick decision on what you want to address as part of this challenge.

You don’t need to do this step if you have already received requirements from your Product Manager.

To keep it simple, let’s try to take the social media direction.

Step 2: Sketching an initial idea

Think about the different elements that an activity feed comprises.

I am not the best at it either

• Some kind of Activity statements
• Time or date or x hours go
• Above 2 elements grouped together and repeated as a list
• Screenshots of the activity performed
• Filter to split out the activity
• Search bar

This much should be enough.

Create a sketch incorporating the elements that you have listed

It’s important to do this step before doing any research. This way you add to the design your own ideas before getting swayed by others’ perspectives.

This is the Sketch that I have come up with. I have gone with a mobile app screen but you can choose to design for a desktop or a tablet.

Initial Sketch

Step 3: Research

Collect at most 5 images that look good to you and have a somewhat different approach. You can use sources like Google Image search, Dribbble, app screenshots from your phone, Mobbin, etc.

From the images identify the elements that they have used. Pay particular attention to the elements that are different from your element list.

Pro Tip: If you are getting a lot of images that are someone’s design concepts, look at 2 or 3 different approaches, and move on to looking at actual apps. Mobbin.design is a great resource to do that.

Source

The designer here has interpreted the activity feed as Notifications.

Elements used:
- Activity Statements
- Timestamp

Other elements used:
- Day
- Link to the post in a statement
- Photographs to classify notifications

Source

The designer here has gone for a minimal approach.

Elements:
- Activity Statements: converted to a few words
- Timestamp
- Search

Other elements:
- Categorized by month
- Icons to classify different activities

Source

Timeline approach.

Elements used:
- Activity statements
- Timestamp
- Actual screenshots

Now that we have looked at some concepts, look at 1 or 2 actual app screenshots.

I tend to use Mobbin.design for this. It has the option to filter out screenshots by patterns which I find very useful.

Mobbin.design filtered by pattern: Activity & Notification

Or you can actually take screenshots from your phone from the apps that have an activity feed.

Screenshot from Trello app

Trello’s approach to the activity feed.

Elements Used:
- Activity Statements
- Time Stamps: Date and time separated

Other elements:
- Links in statements
- Icons to categorize activity

Step 4: Final sketch and wireframe

It’s time to make a quick decision on which approach do you like the best.

I chose the timeline approach as it conveys in a simple way when everything happened.

Now incorporate this approach into your existing sketch.

If you don’t like any approach, go ahead with your initial sketch.

Modified Sketch

The only part left now is to convert it into something presentable using the design tool of your choice. Incorporate your brand typography and colors.

You can improvise while designing as well if you think there is a better way to represent something. The sketch that we created is a guide for us to get started.

This is the final design that I came up with.

Final Design

I hope you were able to take something away from this process. Please comment if you have identified a better way to do this than what I have listed.

If you found this useful, buy me a coffee ☕️.