PROFESSIONAL WORK
MORE Menu
Design
Faced with the challenge of growing functionality in the image viewer page of the photo gallery application, my colleagues and I sorted out and optimized the functionality and experience for the MORE pop-up menu.

Overview

Project Background

As the Gallery app becomes more feature-rich, the design challenges become greater. In the next release, the "More" pop-up in the photo view will soon have more features, and the product manager hopes that the designers can guarantee the experience in the "More" pop-up.

Info.

Group Project

My Role

Design Lead

Duration

May ~ May 2021

Result

1. All functions are divided into 4 categories, as: “Edit", “Manage", "Share", and “Smart".
2. Each category of functions is arranged in top-down order of priority.
3. Limit the height of the "More" pop-up menu, and when it exceeds the height limit, user can scroll up to view other functions.

Categorize the Functions

There are currently a total of 18 functions such as MOVE, COPY, PLAY SLIDESHOW, RENAME...

We analyzed and classified these functions into four categories, as: "Edit", "Manage", "Share", and "Smart"

Arrange the Priority

We obtained the user usage data of Beta version (licensed) and ranked the frequency of usage for 18 features. Combined with our existing categories, we derived the display priority of 4 categories of features in more pop-ups.

Limit the Display Height

According to HarmonyOS design guideline, the maximum height of an app pop-up menu is 80% of the screen height minus the signal bar and toolbar, so we can calculate that the "more" pop-up menu can display up to 11 items.

According to Steven Hoober’s thumb zone study, if the "more" popup menu is 80% high, it will lead to poor user experience. Therefore, we recommend adjusting the maximum height to 60%. The adjusted popup supports 8 functions.

When there are more than 8 functions, the popup menu displays a scroll bar and supports vertical scrolling.

Consider the Other Devices

There are design differences in the Gallery app on different devices. For example, on tablets, the toolbar is located at the top of the interface, so the menu will pop up from the top right corner.

Taking into account the reading and operating experience of different terminals, we validated our design recommendations on priority and height limits.

When there are more than 8 functions, the popup menu displays a scroll bar and supports vertical scrolling.

Thanks!