Back-half - The foldable UX exploration
Back-half is a productivity and organization tool syncing the back and the front screen assisting users in creating notes and generating to-do lists with a focus on reducing the cognitive load.
This collaborative human-computer interaction design project was conducted between Huawei Technologies and Tsinghua University, exploring new possibilities of saving and extracting item information from different apps and integrating them on the back of our phones. This research project introduced a UI/UX design exploring the potential of interacting between the front screen and the Back-of-Device(BOD).
My Role
Product Designer
HCI Researcher
Project Type
HCI Design
UI/UX Design
Tangible Interaction Design
Invidual Project
Timeline
Summer 2020
(1 month)
Tools Used
Literature Review
Competitive Analysis
User Research
Usability Heuristics
Information Architecture
Wireframing
Prototyping
User Testing
Design Iteration
Challenges faced
-
It's difficult to imagine syncing information from various apps on one platform
-
Users are yearning for an inclusive app to help collect and organize information across the platforms and therefore reduce their cognitive load
-
Exploration of the potential of Back-of-Device(BOD) has a huge impact on the functionality of the back of our mobile phone
Design Research
Research
Understanding the existing solutions
15+ UI/UX design audits
Key Objectives
-
Learn from the existing foldable devices' UX design guide
-
Understand the differences in the UI/UX implementation on different folded devices
-
Learn the design of the multi-page layout with a depth of exploring the types of relationships between the multiple pages
Benchmarking the existing apps
5 APP audits
Key Objectives
-
Unearth the unsolved user pain points
-
Identify the potential business goals and set appropriate performance targets
-
Provides valuable data for design improvement
Identify the design directions
20+ Paper Review
Key Objectives
-
Learn the technique dead-ends of the back of the device
-
Learn the research and experiment methods from a scientific perspective
-
Advance scientific knowledge and improve the overall rigor and reliability of research.
Redesign based on usability testing
2 design iterations
Key Objectives
-
Explore a wide range of potential solutions and ensure that the final design is well-rounded and optimized
-
Identify potential trade-offs and to make informed decisions about the direction of the design
Foldable/Flexible Device Study
First, I researched the physical flexible/foldable screen concepts that are prevailing on the market:
.png)
.png)
.png)
backward-fold tablet
-
A backward-fold tablet with a vertical hinge that keeps each half of the display facing outward when the fold is closed and transforms into a massive display when opened
Inward folding phone
-
Inward folding phone with dual screens. Manufacturers make use of two distinct screens, which can be beneficial for users watching movies and playing games
Phone with horizontal hinges
-
This design folds down like a flip phone, creating a compact device that users can easily slip into a pocket
Physical forms of the flexible/foldable devices:
-
Folded status: The screen is folded.
-
Unfolded status: The screen is not folded.
-
Semi-folded status: The screen is not completely folded, so that one half of the screen can function as a support, allowing the phone to be placed stably.
💡Takeaways:
These three characteristics pose new challenges to app design and development.
To fully utilize the advantages of the foldable screen and deliver satisfying user experiences, the expectation for the UX design of apps on foldable devices are as follows:
1. Expectation 1: Continuous experience
Provide consistent user experience by ensuring:
-
Screen compatibility: Due to the change of screen size, appropriate methods should be used to optimize the content layout on different screens.
-
App continuity: Applications run properly during the switchover between the folded and unfolded states.
2. Expectation 2: Enriched experience
Enrich services on the larger screen by providing:
-
More content: The screen can display more content, improving the display and operation efficiency.
-
Immersive experience: More details can be displayed for picture browsing, video watching, and gaming.
-
Multi-window interaction: With the increase in the screen size, content, and information types, the interaction relationships between information blocks becomes more complicated; two tasks may often be performed at the same time; users' operation area also expands. More interaction methods can be used, increasing the chances of multi-window interaction.
🧾
🧾
With all these new design features, the foldable/flexible phone can unlock creativity through its versatile features.
Conditions and constraints
Get to know hardware and UI considerations that are key to designing for adaptive experiences. Here I lay the conditions and constraints to consider when adapting apps for foldable screens out to explore the further design potentials.
Multi-page Layout and Information Architecture Design
The phone when unfolded allows the display of more content on a single page, as well as simultaneous display of two pages.
Relationship Types between Multiple Pages
When two pages in an app are directly associated with each other, combine them to provide better experience. The type of relationship between the multiple pages directly affects how the information should be rearranged and displayed. Apps need to select proper information architecture styles based on different relationship types.
There are two types of relationships between the multiple pages:
-
Hierarchical relationship
-
Principal and subordinate relationship
Hierarchical relationship
There are two types of hierarchical relationships: multi-level and single-level.
1. Multi-level
The multi-level relationship has a complete multi-level structure, for example, complex system settings menus, portals with massive content (such as products on comprehensive e-commerce platforms; video, image, or music media resources; massive news on news websites), and multi-level sub-pages.
The interaction logic of this type has the following features:
-
In addition to the basic categories at the first level, the sub-categories at all levels are also displayed in the form of lists.
-
Elements on the bottom-level list page are the minimum content elements, such as a single product, a single piece of media material, and a single piece of news.
2. Single-level
A single-level structure is generally presented in the form of "list+details". Each element in the list is an end element, and there is no level-2 category list in the element. For example, a list of content-type elements such as an email list, message list, and a memo list.
The interaction logic of this type has the following features:
-
The list contains only independent elements and does not contain sub-lists. The content attributes on the left and right sides are fixed, and users are not likely to get confused.
-
Users can touch an entry on the left to have the details displayed on the right.
-
Users can touch an entry on the left to quickly switch the content displayed on the right.
📂
📂
Principal and subordinate relationship
In the principal and subordinate relationship, the principal page on one side provides an immersive scene, while the subordinate page on the other side displays information such as comments, discussions, and references. The immersive content can be divided into the left-right or top-down structure.
The interaction logic of this type has the following features:
-
The two pages are independent of each other but there is an obvious principal and subordinate relationship.
-
The subordinate page depends on the principal page, and cannot exist independently when the principle page is closed.
-
The content presented on the principal page should provide and uninterrupted, immersive experience.
-
Users should be able to scroll and view the content presented on the subordinate page. This mode is applicable to information flow, in which users can participate in interaction.
💡Takeaways:
The research on relationship types between multiple pages helped me establish basic guidelines while designing the UI/UX of the foldable screen on the back of the device:
-
The total number of actions: While operating between different pages and going back with the return operation, it will typically require more effort for most tasks. Multi-tasking = context shifting. The key question is —— What should I do to reduce the cognitive load while designing the assets and UX logic of the back of the device?
-
More sub-tasks: The elements and categories on the back of the device should engage with sub-tasks to prevent users from getting when refocusing on the original task. Users should be able to scroll and view the content presented on the back page.
-
Immersive: The content presented on the back of the device should provide an uninterrupted, immersive experience.
-
Coherence: Users can touch an entry on the back page to have more details displayed on the right.
🧾
Foldable Device Study
First, I researched competitors in the field of foldable phones, and there are three main types:
Versatile tablet
A versatile tablet with a vertical hinge that keeps each half of the display facing outward when the fold is closed and transforms into a massive display when opened
Inward folding phone
Inward folding phone with dual screens. Manufacturers make use of two distinct screens, which can be beneficial for users watching movies and playing games
Clamshell phone
This design folds down like a flip phone, creating a compact device that users can easily slip into a pocket
Usability auditing
Physical forms of the flexible/foldable devices:
-
Folded status: The screen is folded.
-
Unfolded status: The screen is not folded.
-
Semi-folded status: The screen is not completely folded, so that one half of the screen can function as a support, allowing the phone to be placed stably.
💡Takeaways:
These three characteristics pose new challenges to app design and development.
To fully utilize the advantages of the foldable screen and deliver satisfying user experiences, the expectation for the UX design of apps on foldable devices are as follows:
🧾
🧾
-
Expectation 1: Continuous experience
Provide consistent user experience by ensuring:
-
Screen compatibility: Due to the change of screen size, appropriate methods should be used to optimize the content layout on different screens.
-
App continuity: Applications run properly during the switchover between the folded and unfolded states.
-
2. Expectation 2: Enriched experience
-
Enrich services on the larger screen by providing:
-
More content: The screen can display more content, improving the display and operation efficiency.
-
Immersive experience: More details can be displayed for picture browsing, video watching, and gaming.
-
Multi-window interaction: With the increase in the screen size, content, and information types, the interaction relationships between information blocks becomes more complicated; two tasks may often be performed at the same time; users' operation area also expands. More interaction methods can be used, increasing the chances of multi-window interaction.
Low-fi prototype
High-fi prototype
Reflection
Takeaways
This is the first HCI design I have done! I have benefited the most from the paper review section which I gained an opportunity to see early areas of research directions and thus sort out the notion I wasn't aware of. After this project, I feel it's necessary for us to conduct a paper review before we decide on the design direction, which can help us avoid the dead end on a specific topic in academic research.
If I have more time to do this project, I may take the challenge of creating the physical model to test the feasibility and capability of the application I've designed. The physical model is a further step beyond the concept design of UI/UX to conduct the A/B test and iterate the design.
UI/UX Design, Service Design, Sustainable Design
Developed a service design system that extends the life cycle of shoes and reduces the carbon footprint through the recycling process
UI/UX Design, Hardware design, Design Thinking
Designed user experience of hearing aids and music app to improve the mental health of elderly people