Ux Johnson’sUI Design Example

2004 - 2012

What is this?

Software Designthe process of making dream come true...

There are

Three Stage of Dreaming

Imagination Drawing

Do It

And it repeats over and over again

Imagination Drawing Do It

Imagination

Drawing

Do It

ImaginationDrawing Do It Imagination

Drawing

Imagination

Drawing Do It

!

Providing Fresh Cooked

Meals

The Requirements Of

FamilyMart Pre-Order App

Too many people

wait in line

Pre-order with mobile phone

Prepare before customer come

Arrange orders automatically

Checkout quickly

The Environment

The Environment

The Environment

The People

EngineerQuick

Efficiency

Cheap

BusinessQuick

Communication

OthersQuick

SalesmanProject Manager

Programmer

HW EngineerIT Guys

Accounting

Marketing Operator

The Time

Primary Traffic

Secondary Traffic

Write Down the Definition

• The App is...

Not a Commercial App.

a Tool.

Quick.

Imagination

Drawing

Do It

Possible Functions

Search Store

Browse Menu

Request Order

Pay on-line

Calculate Calories

Show Product Details

“Like” the Product on Facebook

Promote New Product

Advertising via Push Notification

VIP Card, Credits, Coupons

Possible Functions

Search Store - There’s only one store.

Browse Menu

Request Order

Pay on-line

Calculate Calories - Not necessary for an order tool.

Show Product Details - Most product content is easy to tell via name.

“Like” the Product on Facebook - Not important for a tool.

Promote New Product - It can be done by simply change the photo.

Advertising via Push Notification - Not commercial app.

VIP Card, Credits, Coupons - Not commercial app.

Time Region

Category & Menu

Action

Shop cart Summaries selected items

Filter menu for different sales region

For product selection.Works as a list table.

Checkout, setup and check history.Works like toolbar.

Shop cart

Time Region

Category & Menu

Action

Tap to open / close

Swipe to delete (hidden)

Show Subtotal, Total Amounts

Adjust Quantity

All shop cart feature come from top.

The badge indicates how it works.

The “- , +” button tells user the quantity is

changeable.

The animation of blue area indicates user

may swipe down to open it.

Time Region

Category & Menu

Action

Shop cart

Swipe to change filter

Tap also works.

Allow un-limited time region. (or category)

The triangle indicates current region.

And it also hints the following content is

under the selected region.

Time Region

Category & Menu

Action

Shop cart

Tap photo to add. (need try)

Tap “-” badge to remove.

Swipe vertically to navigate.

Icon view allows more product in a page.

Quantity over photo also indicates which

product is selected.

The background style tells the menu may

have more below.

Time Region

Category & Menu

Action

Shop cart

Active while checkout is available.

The Animation shows where the view go, which indicate how user should navigate between views.

icon

Easy to identify.

Easy to tell the key function from icon.

Without Chinese Text.

Better jump out of page.

Easy to identify.

Easy to tell the key function from icon.

Without Chinese Text.

Better jump out of page.

Survey Concept

DesignAcceptable...

1st. it’s Food2nd. Popup!

Food + Popup

it’s Food

Popup!

it’s Food

Imagination Drawing

Do It

Demo

Implementation

How to layout the App?

The difference between Android & IOS?

Visualized Components

Find your visualized components.

It is possible to find views to be combined

together as an interact unit.

Name it, and sync through Photoshop group

name, UI layout item name, class define in

program, with same define.

Such as ProductView

Visualized Components

NavigationBar: UINavigationBar | FrameLayout

BillItemListView: TableView | ListLayout

CategoryView: UIScrollView | PageView

MenuRowView: UITableViewCell | GridLayout

Toolbar: UIToolbar | FrameLayout

Difference Between Android & IOSPlan the layout for each platform, sync the abstract idea of virtual components.Window

UIView

UINavigationBar

UIScrollView

UIScrollView: Horizontal

UITableView UITableView

UIToolbar

UITableViewCell

IOS

Navigator

CategoryView

MenuView

ProductView

ToolbarView

ListLayout

FrameLayout

Container

PageView

GridLayout GridLayout

FrameLayout

Android

Navigator

CategoryView

MenuView

ProductView

ToolbarView

App Core

Store

Difference Between Android & IOS

Define an abstract data model for both runtime,storage and data transmission.

All platform should share the same abstract data model design, but the implementation may be different.

Better not use the JSON lib output as runtime data model.

Products

ProductProductProduct

Product

Promotions

ProductProductProductPromotion

Content

User Data

Orders

ProductProductProduct

Order

{Store : {

Products: [{ /* Product */ }, { /* Product */ } ...

],Promotions: [

{ /* Promotion */ } ...]

}}

{User : {

Orders: [{ /* Order */ } ...

]}

}

AppDelegate

Difference Between Android & IOS

Window

UIView

UINavigationBar

UIScrollView

UIScrollView: Horizontal

UITableView UITableView

UIToolbar

UITableViewCell

IOS

RootViewController UIMenuViewController

init

Use the MVC framework suggested by IOS design guide lines. Better not to make your own UI framework.

Difference Between Android & IOS

ListLayout

FrameLayout

Container

PageView

GridLayout GridLayout

FrameLayout

Activity

Fragment Fragment

init

Use fragment for each virtual component instead of use activity directly. The layout flexibility will be better.

In Android framework, resource for an UI will be divide into several part, such as layout.xml, shap.xml, images mapping, fragment and data adapter for interface. You better organize a naming system to management them all together.

Some Hints

Some Hints

Don’t block user from operating UIShow Layout ASAP.Cache regular data.Load without blocking other UI.Update existed UI instead of re-generate it.

Some Hints

Only key process needs to be BRIEFKeep key process on the focus line: left-top to right-bottom.There’s always only one primary process for a view.Hide advance features.

Some Hints

Layout first, then color...Design the layout to highlight key feature.Use every possible skill to make operation flow work before adding any color or texture.Leave color for content, not interface.Mostly, color used as representation of states between contents.

Some Hints

Animate for showing how App works, not for fancy.

Some Hints

App is personal, forget about portal.People pay for useful tool, and carry around.No one likes to carry DM around.Mobile phone isn’t made for share, but for personal.People share by network, not by passing the phone itself.

Operate immediately without login again and again.Provide key function at first sight, not operation menu.