mobile design pattern library for mint.com

Mobile Design Pattern Library for mint.com

Barb BelsitoChen Liang

Wan-Ting HuangRyan Mochal

1—Navigation 2—Forms

3—Layout4—Tables & Lists

5—Search, Sort & Filter6—Tools

7—Charts8—Feedback

9—Affordance

2

Table of Contents

1 Navigation Toggle Tabs ............................................................................................ 3 Page Carousel ....................................................................................... 4

2 Forms Dynamic Buttons ................................................................................. 5

3 Layout Footer ...................................................................................................... 6

4 Tables & Lists Expanding List ...................................................................................... 7 Grouped Rows - Scrolling ................................................................. 8

5 Search, Sort & Filter Dynamic Search ................................................................................... 9

6 Tools Refresh Function ............................................................................... 10 Trash Can .............................................................................................. 11 Alternate Delete Function ............................................................. 12

7 Charts Budget Bar - Horizontal .................................................................. 13 Budget Bar - Vertical ........................................................................ 14 Bar Chart Tag ...................................................................................... 15

8 Feedback Selection Confirmation ................................................................... 16 System Status ..................................................................................... 17 No Information Message ............................................................... 18

9 Affordance Directional Arrow ............................................................................. 19 Sliding Screen - Up ........................................................................... 20 Rotating Screen ................................................................................. 21 Realistic Features .............................................................................. 22 Colors .................................................................................................... 23 Icons ...................................................................................................... 24

3

Toggle Tabs 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

ProblemUsers 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.

Navigation 1

4

Page Carousel 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


ProblemUsers 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.

Navigation 1

5

Dynamic Buttons 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)


ProblemUsers need to know when

a button is selectable or deactivated.

Solution

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.

Forms 2

6

Footer 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.


ProblemUsers need to know when their

information was last updated and want to be able to make

manual edits as well.

SolutionAdd 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.

Layout 3

7

Expanding List 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.


ProblemSometimes 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.

Tables & Lists 4

8

Grouped Rows-Scrolling

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


ProblemIf there is a long list, users might lose the subheader information

during scrolling.

SolutionKeep 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.

Tables & Lists 4

9

Dynamic 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


ProblemSearch 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.

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.

Search, Sort & Filter 5

10

Refresh Function 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


ProblemUsers 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.

Tools 6

11

Trash Can Description When to use

A trash can icon is used to indicate the “delete” function.

- Wherever users are able to delete things


ProblemUsers need to be able to delete

something without spelling it out for them and cluttering

the screen.

Solution Provide users with

the option to delete using the trashcan icon because it’s small

and indicates the action through an image.

Tools 6

12

Alternate Delete Function


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


ProblemUsers need to be able to delete

multiple items without cluttering the page with the trashcan icon.

Solution

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.

Tools 6

13

Budget Bar - Horizontal


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)


ProblemUser needs to visually see their

progress based on a preset limit.

SolutionHorizontal Bars allow the user

the visual representation of their progress based on a

predefined limit.

Charts 7

14

Budget Bar - Vertical


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.


ProblemUser needs to view certain information

across time and make changes based on presented information.

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.

Charts 7

15

Bar Chart Tag 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


ProblemUser needs to view and adjust

data on chart. An interaction is also needed to show details

of a data point.

SolutionAdd a tag to the chart that users

can use to view and adjust numbers easily and accurately.

Charts 7

16

Selection Confirmation


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


ProblemUsers need to know what they

selected so they can see if they touched the screen in the

correct spot.

SolutionProvide confirmation when an

action is made to select an item in a list.

Feedback 8

17

System Status 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.)


ProblemUsers 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.

Solution

Provide the user with the system’s status using an overlay that indicates

the current action the app is processing.

Feedback 8

18

No Information Message


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.)


ProblemThere is no information to display

to the user for various reasons.

Solution Provide a message in

place of where the information would be if there were information to display.

Feedback 8

19

Directional Arrow 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


ProblemEnable 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.

Affordance 9

20

Sliding Screen - Up 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


ProblemUser needs to be able to differentiate

between the different flows of the application.

Solution

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.

Affordance 9

21

Affordance 9Rotating Screen 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


ProblemUser 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

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.

Affordance 9

22

Realistic Features 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


ProblemUsers need to quickly and easily

interpret what they are seeing.

SolutionUse 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.

Affordance 9

23

Colors Description

When to use

Different colors contain certain meanings when viewed by the user. These colors allow the user to quickly interpret the information/button.

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.

ProblemUsers need to quickly and

efficiently understand certain information that is being

presented to them.

Solution Predefined colors

allow users to understand and apply information across the

entire app without having to dig for more specific information

or clarification.

Affordance 9

24

Icons Description

When to use

Different icons are used to visually represent certain actions or words.

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.

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.

Affordance 9

mobile design pattern library for mint.com

Documents