guardianproject / guardianproject/haven

[Usability] Optimize UI of Home Screen to Clean Up Unneeded Elements

Open
#229 7 comments 0 reactions 0 assignees View on GitHub
UX
Dominant language
Java
Stars
6.8k
Forks
752
PR merge metrics
No merged PRs in 30d

Description

There are a lot of UI elements on the screen that either may not need to be there or could have hierarchy improvements.

![home-side-by-side](https://user-images.githubusercontent.com/28545431/35121683-13537a06-fc51-11e7-9193-3629a5b1601a.png)

## Two Types of UI Elements

### Primary/Supports current task
1. Instructions
2. Timer
3. Primary Action - Start Now
4. Child Actions - Change camera

### Secondary/Takes me somewhere else
5. View Logs
6. Settings

## Proposed UI:

The proposed IA uses common patterns for navigation, and groups related things together with tighter proximity.

### Logs
This is the only place other than Settings that you can go, and if you got to this screen from the logs, one of the most common patterns for the navigation is in the top left - examples include back buttons or hamburger menus.

### Settings
A common location for Settings is in the top left of an app, or if there are many navigation items, inside of a hamburger/staged menu. The sound and motion settings are removed to clean up the UI and can be accessed inside of the Settings page.

### Camera
Changing which camera you use is directly related to the primary task of starting Haven, and grouping it closer to the primary UI elements and using their center alignment make interface tighter and more organized.

### Timer
How often is a user changing the countdown? Is that the primary action the user is expected to take? Show the timer after the user presses “Start” and let them adjust the timer duration in Settings.

## Pages from [Design Audit](https://github.com/guardianproject/haven/issues/218)
![ia - current](https://user-images.githubusercontent.com/28545431/35121722-3c1ceb66-fc51-11e7-975c-24f4a0c0c76b.jpg)

![proposed ia](https://user-images.githubusercontent.com/28545431/35121743-53f134cc-fc51-11e7-82ac-fc6831296d18.jpg)

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by reviewing the Home Screen, Logs, Settings, Camera, and Timer areas described in this issue, along with the linked Design Audit in issue #218. Compare the current interface with the proposed information architecture and determine the affected Android entry points. Done means the unnecessary elements are removed or regrouped and the proposed navigation and task hierarchy are implemented consistently.

Written by the indexing model from the issue text.

Assessment

Tech stack
android, java
Domain
design, mobile
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.