Menu Menu Menu UX/UI
For the assignment in my Research class, I was tasked to overcome a challenge from chapter 13: Our Hand-Eye CoordinationFollow Laws, book: “Designing with Mind in Mind” by Jeff Johnson. In this chapter, the author mentioned two different types of laws that is useful in designing menus. First law that he talked about was Fitts’ Law: Pointing at displayed Targets which implies click targets like buttons, and making sure of the distant between the targets. Second law was Steering Law: Moving Pointers Along Constrained Paths implies pull-right menus and page rulers. These laws are useful for the designers tend to take advantage when designing menus for the players or users.
Design Challenge
Designing menu are constantly considered to be challenges for many designers because they want the menu to be perfect for their users and is easy to use. Use both laws to create menu that would work for the users.
Research
I had conducted many research about types of menu that most users had favored the most after learning both laws. I took my time to carefully think about two laws when considered what type of menu. I had considered the questions while researching:
- What type of menus that people most prefer?
- What would attract the users?
- What style is most attracted and more commonly used?
- Spacing? Distancing between the buttons?
- What is the most rarest menu to used?
Ideation Phase
To come up with ideas, I completed the Crazy 8’s activity. Basically, this activity required sixty seconds to illustrate or write an idea related to your task and repeat it until you get all eight section complete.
Here are the ideas below
Which ideas I did go with in end?
I had considered these two ideas for some time. One is the gaming menu which is connected to my major (Gaming Design) and other one is circular menu which I always found really interesting. Circular menu, I considered it as enjoyable and fun to mess with. It have the variety of options for the users to choose from.
Prototype
After researching and ideations, I used Adobe XD to create a prototype while focusing on circular menu from my sketches.
I thought most commonly used apps on phones which are music, email, messenger, camera, setting, contacts and favorites. So I created large circle with plus as the point of origin for the apps. Then I added little circles with icons that display the apps surrounding the point of origin. At first the colors were black and white.
Testing Experience
After developing the prototype, I conducted interviews with three people between age of 20–60. One was retired lady in her early sixty, other was a software developer and a student. They all gave similar answers:
- Perfect layouts
- Easy to navigate
- Wish the black and white are different colors
After the interviews, I decided to change the black and white to colors version of the menu and adjust the size of the buttons. I made the point of origin little bigger and shrink little buttons a bit.
___________________________________________________________________
The project made me realize the value of researching and testing. The knowledge that you would gain from researching can help to come up with the best design that would benefit the users. The testing are very useful because you would want to gain the feedback and to know what need to be improve.
