Redesign the Internet Launcher

Keypad Interaction Design

Duration

2019 Summer, 1 month

Overview

Today's topic is the Internet browser on the smart feature phone OS. It had worked very well, but somehow it was old-fashioned and a little bit boring itself. Let's see what changes we have made.

My Contributions

I teamed up with other UX and visual designers to explore design ideas. We sketched and made some prototypes to evaluate designs. We had fun!

Had the old design done anything wrong?

Absolutely no! The old design embraced the most common interaction style on a keypad device: users press arrow keys to navigate between buttons and hit the confirm key to proceed to further steps. In the picture, there is an example. You use up and down to choose a saved website or use left and right to switch between Top Sites and History. It was safe but nothing special.

Key requirements:
Simplicity and clarity.

Keep Search, Top Sites, and History

It was more like a rebranding project, so old functions should be available on the new design. We hoped that the past mental model still works and experienced users would not be depressed by missing features.

Early idea #1

This idea put history websites into the 2nd layer under the history folder and made top sites exposed to users at their first glance. On the top was a list of tools, including search, history, and other potential features.

Pros:
● Well-structured and easy to understand.
● Top sites were given high priority so that the website spots had the potential for monetization.

Cons:
◇ Icon style was applied to all elements, so some confusion might happen. The difference between a tool and a website should be made more clear.
◇ Tools behind the tool list were less likely to be seen by users.

Early idea #2

This concept was simple. Everything could be seen at the first glance. Users started from the search bar in the middle. Over the search bar was a list of Top Site icons and under the search bar was the history list in list view.

Pros:
● Everything was accessible on the 1st layer.
● Users could directly input the terms they wanted to search.

Cons:
◇ The concept was complicated and needed more effort for users to build a correct mental model.
◇ The search bar was located beside other features, so it became an issue about how to show search suggestions during typing terms.

Midway thoughts

We had made some conclusions after a few rounds of design critics.
a. Putting everything on the 1st layer seemed good to fast access each item, but it also brought a complicated layout which might confuse users. We did not want this trade-off.
b. A good structure was favored. It would help users to quickly understand the browser's capability.
c. Arrow keys were still used a lot and this situation was kind of unavoidable on all designs.

Stop thinking about UI,
take a look at the device

Other keys could join the party!

Using only the arrow keys and the OK button is a regular approach, but a mapping between other physical keys and the selectable items on UI could be more interesting and fast for selection tasks.

Prototyping the idea!

All the design team members thought the rough idea could be a good starting point, so we made this prototype to test it out and also used it to deliver this concept to other departments of the company.

The final design

Simple, clear, and more

We sort of mixed tools and top sites together in the 9-box grid. In the old design, Top Sites worked like bookmarks and it stored user-picked websites. If we applied the same concept to the new design, there would be a limitation on the number of websites users can add to the grid.
Therefore, we invited another important idea: a folder, named Favorites, stores the websites that user manually adds, and from spot 5 to spot 9, the 5 preset popular websites also allow users to replace as they wish.

Moreover, in this design, there is more room for business promotion.
● Spot 3 is for the app store.
● Spot 5 to spot 9 could be sold to other Internet businesses. For example, Facebook and Twitter.
● The bottom list is reserved for our recommended apps from the app store. Those recommended apps are also profitable resources.

Same idea, another application

There are several advanced features of the internet browser, such as zoom in/out, go-to-top, and etc. We have defined some number keys as hotkeys for users to utilize and perform those actions. In the original design, all the hotkeys were simply listed out. However, when the supported functions become more, it would be harder for users to get familiar with those keys and it would eat up more space to show the tip.
Thus, we redesigned the tip. Providing a clear keypad-function mapping image to the users, we reduced the user's mental effort to understand and learn the whole concept.

Takeaway

Mapping between physical things and functions could be fun and helping users to master a device.
When a device has different mappings among apps or screens, we say the system has different "modes". Having different modes does help a device with just limited inputs to complex input requirements. We still need to consider carefully when we think of adding one new mode into the system because users may have a dominant usage experience of one main mode to affect their performance on other unfamiliar modes.