MobileDesignPattern Library for mint.com Barb Belsito Chen Liang Wan-Ting Huang Ryan Mochal
1—Navigation 2—Forms 3—Layout 4—Tables & Lists 5—Search, Sort & Filter 6—Tools 7—Charts 8—Feedback 9—Affordance
Table of Contents
1 Navigation
Toggle Tabs ............................................................................................ 3 Page Carousel ....................................................................................... 4
2 Forms
Dynamic Buttons ................................................................................. 5
7 Charts
Budget Bar - Horizontal .................................................................. 13 Budget Bar - Vertical ........................................................................ 14 Bar Chart Tag ...................................................................................... 15
8 Feedback
3 Layout
4 Tables & Lists
9 Affordance
Footer ...................................................................................................... 6
Expanding List ...................................................................................... 7 Grouped Rows - Scrolling ................................................................. 8
5 Search, Sort & Filter
Dynamic Search ................................................................................... 9
Selection Confirmation ................................................................... 16 System Status ..................................................................................... 17 No Information Message ............................................................... 18
Directional Arrow ............................................................................. 19 Sliding Screen - Up ........................................................................... 20 Rotating Screen ................................................................................. 21 Realistic Features .............................................................................. 22 Colors .................................................................................................... 23 Icons ...................................................................................................... 24
6 Tools
Refresh Function ............................................................................... 10 Trash Can .............................................................................................. 11 Alternate Delete Function ............................................................. 12 2
Navigation
1
Toggle Tabs Problem Users need to view more specific information that has already been categorized
Solution Toggle Tabs allow for information to be presented in multiple formats for users to view. They are preloaded on update so each toggle does not initiate an update of the app.
Description
When to use
Toggle between the format in which certain information is represented. Current category is highlighted (normally by change in color and shade). This information is preloaded from the latest update and does not require a new update to use.
- Use when the same information can be presented in multiple ways or formats
Wireframe
Screenshot
3
Navigation
1
Page Carousel Problem Users need to be able to quickly navigate multiple pages within the same category.
Solution Allow users to navigate a set of pages using the flick gesture. Use the header to display how many pages are in the carousel. Flicking displays the next page. Place arrows in the footer as another option for navigating through the carousel.
Wireframe
Description
When to use
Allows users to navigate from one page to the next in one of two ways - 1. by swiping their finger over the screen to the left or right, or 2. by touching the left or right arrows on the screen. These two actions allow users to move to the next or previous notification within a given section of the application in order to move through various pages.
- When there are multiple pages to navigate through in a given set
Screenshot
4
Forms
2
Dynamic Buttons Problem Users need to know when a button is selectable or deactivated.
Solution
Description
When to use
User must enter all required fields of information before they have option to click button. Button is grayed out and becomes dynamic and darker once all required fields have been entered with some information.
- Whenever certain information is required before the user can proceed (see log-in and sign-up screens)
Make buttons dynamic. A button will look different when deactivated so users know they need to enter more information in order to make it selectable.
Wireframe
Screenshot
5
Layout
3
Footer Problem Users need to know when their information was last updated and want to be able to make manual edits as well.
Solution Add a footer bar that gives users the option to refresh, see when their information was last updated, and manually modify information on the page they are viewing.
Description
When to use
Solid container at the bottom of most pages. The footer contains the refresh icon (see refresh) on the left, when the app was last updated centered in the middle, and the “Add Transaction� icon. Allows user to always have option to modify the current page they are viewing by adding a transaction or updating the current information by refreshing the page.
- Should be on any page where a transaction can be added that would change the current display of information on the page.
Wireframe
Screenshot
6
Tables & Lists
4
Expanding List Problem Sometimes there is extra information that doesn’t always need to be visible to the user, but they would still like the option to view it.
Solution Allow users to reveal more information by tapping an icon.
Wireframe
Description
When to use
Allow users to show or hide more information. Show this option with a triangle icon in a circle. If the triangle is upright, that means there is more information to show that is currently hidden. If a triangle is pointing downwards, that means the extra information is currently showing. If a user touches the icon to show more information, the list below will push down and the hidden information will appear at the top. If a user touches the icon to hide more information, the list will push up until it covers the extra information at the top of the list.
- To hide additional information from user, but still give them the option to view it if they choose ‌ and then once again hide it if they choose.
Screenshot
7
Tables & Lists
4
Grouped RowsScrolling Problem
Description
When to use
The subheaders move up with the list and push out the previous sub header when it reaches it.
- In a list that 1) contains multiple subheaders, and 2) can be scrolled up or down
If there is a long list, users might lose the subheader information during scrolling.
Solution Keep the subheader at the top of the list if it reaches the top of the page during scrolling so users can continue to see which subheader the items are a part of.
Wireframe
Screenshot
8
Search, Sort & Filter
5
Dynamic Search Problem Search functions can be tedious if users are required to spell out what they are searching for word-for-word. Searching is slowed even more if users are required to take an additional step telling the app that they are ready to search.
Description
When to use
As the user types letters, the results appear in-time in the area below the search text box in which they are typing. Each time a letter is entered or removed, the search results automatically adjust without the user having to press any additional buttons.
- Wherever users are able to use a search function
Solution Allow users to search quickly in as few steps as possible by implementing a dynamic search function that updates results as the user types.
Wireframe
Screenshot
9
Tools
6
Refresh Function Problem Users need the ability to update their information at any time and to see when that information was last updated.
Solution Allow users to refresh the page in order to make sure the application is displaying the most current information. Additionally, show users when this action was last taken.
Description
When to use
Within the footer, the user can always find an icon on the left which will allow them to refresh their information. Centered in the middle of the footer is the time and date stamp of when the application last refreshed the information in the application. If the application is currently in the process of refreshing, the time and date stamp will be replaced with the word “Refreshing...� and the refresh icon on the left will be replaced with a dotted spinning icon.
- Whenever the footer is present on the page - Replace refresh icon and date/time stamp when application is in the process of refreshing information
Wireframe
Screenshot
10
Tools
6
Trash Can Problem Users need to be able to delete something without spelling it out for them and cluttering the screen.
Description
When to use
A trash can icon is used to indicate the “delete” function.
- Wherever users are able to delete things
Solution
Provide users with the option to delete using the trashcan icon because it’s small and indicates the action through an image.
Wireframe
Screenshot
11
Tools
6
Alternate Delete Function Problem
Users need to be able to delete multiple items without cluttering the page with the trashcan icon.
Solution
Description
When to use
Instead of a repeating trashcan icon per item in a list, this allow users to delete items from a list in one of two ways - 1) swipe finger over item to the left and a button reading “delete’ will appear over the item, or 2) touch the ‘edit’ button in the right part of the header and then icons will appear on each item allowing the user the option to delete items from the list.
- In a list of items that users are able to remove (delete) - In place of repeating the trashcan icon on each item in a list
Allow users to delete items from a list in one of two ways 1) swipe finger over item to, or 2) select the ‘edit’ button in the right part of the header.
Wireframe
Screenshot
12
Charts
7
Budget Bar Horizontal Problem
User needs to visually see their progress based on a preset limit.
Description
When to use
These bars appear horizontally across the page. They are a visual way to represent the the overall information that is contained within a particular category. These bars often contain color to help the user understand the information they are currently viewing.
- To visually represent information contained within a category. - Represent information across time. (ie time of month)
Solution Horizontal Bars allow the user the visual representation of their progress based on a predefined limit.
Wireframe
Screenshot
13
Charts
7
Budget Bar Vertical Problem
User needs to view certain information across time and make changes based on presented information.
Description
When to use
Used to represent absolute amount of money spent through a single month. They are often stacked next to each other for easy comparison across increments of time (months or years).
- Represent collective data over a period of time. - Compare and contrast information over a span of time.
Solution Use vertical bars to represent information across time. This allows user to compare the information over a particular time and make changes based on visual representation of information.
Wireframe
Screenshot
14
Charts
7
Bar Chart Tag Problem User needs to view and adjust data on chart. An interaction is also needed to show details of a data point.
Solution Add a tag to the chart that users can use to view and adjust numbers easily and accurately.
Wireframe
Description
When to use
Dynamic tag that allows user to view the current set number. User can slide tag up and down to adjust data. User can also slide horizontally to allow for greater intervals while adjusting vertically. As user slides vertically, header changes to allow user to see the number changing. This tag also contains a line to allow user to view how changed budget would look across time. User can also tap on chart and manually enter desired budget amount and tag will automatically adjust accordingly. When person edits, trash icon switches to save icon.
- Adjust limits across time span - Make setting limits interactive
Screenshot
15
Feedback
8
Selection Confirmation Problem
Description
When to use
A new selected item in a list will be highlighted with green text and will have a check mark to the right of the text.
- Confirm new selected category when category has been previously selected - Does not occur when selecting original category
Users need to know what they selected so they can see if they touched the screen in the correct spot.
Solution Provide confirmation when an action is made to select an item in a list.
Wireframe
Screenshot
16
Feedback
8
System Status Problem Users need to know when the app is processing information in order to increase users’ confidence with the application. Otherwise, they might think the app is frozen when really it is just processing information.
Description
When to use
Use an overlay with the background grayed out or darkened that gives a status message and spinning circle icon. This indicates to users that the application is currently processing information. It shows users the current status of the app.
- When the application is in the middle of processing a request (ex. saving, establishing a connection, etc.)
Solution Provide the user with the system’s status using an overlay that indicates the current action the app is processing.
Wireframe
Screenshot
17
Feedback
8
No Information Message Problem There is no information to display to the user for various reasons.
Description
When to use
Tells users no information is available to be displayed. This is done on the same page and not as any kind of overlay. The text telling users that no information is available is placed where the information would be if there was information to show.
- If no information is available to show (ex. no search results came up, no transactions have been made by user, etc.)
Solution
Provide a message in place of where the information would be if there were information to display.
Wireframe
Screenshot
18
Affordance
9
Directional Arrow Problem Enable users to anticipate the movement of the screen and the flow of navigation.
Solution Use an arrow to help users predict which way they are navigating, which way the screen will move, and to indicate that an item in a list is selectable.
Wireframe
Description
When to use
Arrows, represented by “>� in many cases, allows the user to see more information about the selected topic. The user will be taken to a sub-level of the category where more specific information on the topic will be given. The page will slide left or right depending on the way the arrow is pointing.
- When more information is contained within a category - When buttons take a user back to the previous screen
Screenshot
19
Affordance
9
Sliding Screen - Up Problem User needs to be able to differentiate between the different flows of the application.
Solution
Description
When to use
A new screen slides up from the bottom and covers the current screen. This indicates to the user that their last screen is not gone, but is simply laying under the screen that just slid up over it.
- Whenever a user is using an “add� function
Any time a user indicates they want to add information, the screen that allows them to enter the information will slide up from the bottom so users can see it is a temporary screen and will slide back down once they enter the information.
Wireframe
Screenshot
20
Affordance
9
Rotating Screen Problem User needs to be able to differentiate between the different parts of the application such as administrative screens and step-by-step screens guiding them through the app.
Solution
Description
When to use
The screen rotates, so it almost looks like it is “flipping.” This shows users that this new screen is not part of the “flow” of the other functions in the app. For example, this action is used when navigating from the main functionality of the app to the settings of the app. The settings is where users perform administrative tasks on their account.
- When users navigate to and from administrative pages of the app
When a user is going to/from administrative setting screens, indicate they are not still in the part of the flow of the application by rotating the screen when it changes.
Wireframe
Screenshot
21
Affordance
9
Realistic Features Problem Users need to quickly and easily interpret what they are seeing.
Solution
Description
When to use
Each expense is included within a certain category. The full display of details has the appearance of a receipt with the inclusion of a shadow and perforated edges.
- To show specific details related to specific information - To tie specific information back to real world items
Use features from reality to make it more apparent to users what they are looking at. For example, in mint.com, they use small details to replicate a receipt when users are looking at specific transactions they made.
Wireframe
Screenshot
22
Affordance
9
Colors Problem Users need to quickly and efficiently understand certain information that is being presented to them.
Description Different colors contain certain meanings when viewed by the user. These colors allow the user to quickly interpret the information/button.
When to use
Solution
Predefined colors allow users to understand and apply information across the entire app without having to dig for more specific information or clarification.
Grey: an item is pending or is in the process of updating Black: information has been confirmed and categorized and it is also used for top-level headers and the footer Green: Represents selection on certain items or categories, represents user is still under budget when contained within horizontal bars, and represents amount spent when editing budget Red: Within a number or horizontal bar represents the person is currently over budget for that category this month Yellow: Within horizontal bar represents category is approaching budget limit for the month Orange: There are new, unread updated or alerts for the person to look at. It is used to draw the attention of the user. Light Blue: Used for general labels and subheaders within a certain category (time, date, etc.) Dark Blue: Used to draw attention and confirm a change made by the user. Provides the idea of confirmation to the user.
23
Affordance
9
Icons Problem
Users need quick references and guides for simple and easy navigation through the application without cluttering. the UI.
Solution
Icons allow users to quickly understand a particular functionality on the app and apply that understanding across the entire application without having too much clutter on the UI.
Description Different icons are used to visually represent certain actions or words.
When to use Plus Sign: allows for the adding of a new category/items within the current level the user is working in Pencil Sign with Round Background: allows for editing or adjusting of the previously selected budget limit Pencil Sign with Square Background: adds a new transaction Trash Can: delete data Refresh Icon: updates all data within the app. and updates the data currently being displayed to the user. Triangle Icon within Circle: hides information when triangle points up and shows information when triable points down.
24