from design to uml to working wireframe

STEVEN VERHOESTui/ux designer

Since 1993

FROM DESIGN TO UML TO WORKING WIREFRAMES

Ux beers

PRODATA MOBILITY SYSTEMSclient

PROJECT: MOBIGUIDER

Complete solution for Intelligent Transportation Systems and Automatic Fare Collection

PROJECT: MOBIGUIDERMy design brief

WHAT MAKES A BUSINESS APPLICATION

question

WHAT ARE THE CORE ELEMENTSquestion

FORMS - LISTS - NAVIGATION

style

the

version 01.03

navigationwindow typesThe mobiguider navigation pattern organize the content so your users can navigate easily, intuitively and focus on the content.Every window, spilt- or edge-panel can be the starting point to open an other window, spilt- or edge-panel. Every window, spilt- or edge-panel can add content to the current content

[a][b] windowA window represents a functional part of the app. Each window can call or create other windows. Windows are logical containers of content and related functionalities. A window can contain 0, 1 or more split and/or edge-panels.

[c] edge-panelAn edge-panel is part of a window and extends the

functionality of that window. Typical use is for lookups,

search-result-details, parent-child relations, etc. An

edge-panel is by default modal.

recommendation: try to restrict overlapping edge-

panels (edge-panels opening edge-panels)

[d] split-panelUse split-panel when related content needs to be

shown but not fully depending and the content can live

by itself.

recommendation: try to avoid having more than 3 split-

panels in a window

[e] flip-viewThe flip-view control lets people flip through a collection

of items, one at a time. It offers people a way to look at

each individual item while navigating through the

collection.

ab

cd

e

version 01.03

landing pagethe landing page is the starting point of mobiguider.the landing page shows the available modules to the user.

Every module is organized as a pivot.

[a] modulesA module is a major part of the mobiguider suite. SSM

(service support manager), POI (Point Of Interest) are

modules. Every module groups functionalities into tiles.

[b] tilesTiles appear on the landing page and replace the application

shortcuts that would have appeared in a menu. People tap a

tile to launch a module functionality, search, create, … Every

tile opens a page.

[c] tile feedbacka tile can contain user feedback, so the landing page can act

as a dashboard

[d] tile colorThe color of a tile has in general no semantic meaning

(except red). Use color to group similar functions or

functionalities that have a logical connection.

important: the color of the tile must correspond with the color

of the page header [e]

[f] reduse red only for high level warnings, for business critical

warnings, things that have to be done by the user before

anything else

[g] screen sizeA pivot on the landing page has no vertical scrollbar, so the

max height of the tiles may not exceed 430px. This results in

a min screen size of 675px wide by 480px height.

b

a

c

d

f

eg

version 01.03

pivotEach pivot is a kind of a tab, and the tabs are listed across the top.

Pivot pages are focused and efficient. Their primary focus is task-based action such as filtering, sorting, and showing related items. They’re used to promote and show relevant content. Try to limit the number of pivot pages to six or fewer.

a pivot is the combination of

[a] pivot title[b] pivot content[c] pivot commands

[d] navigationClicking on either the pivot title, the pivot content or the scrollbar [c] will focus the pivot. The active pivot will move to the left side and show it’s pivot buttons if buttons are present.

[!] shortcutsYou can switch from pivot to pivot by using the ALT-key plus the number of the nth pivot on the page. In the example ALT+4 will bring you to the last pivot.

d

a

b

c

version 01.03

pivot content:formA form is a representation of data items.

[a] A data item is a combination of a label and a value also known as a “value-pair”.

A data item can have one of the following states:[a] read[b] disabled[c] edit

Every state can have a different view.

a

b

c

version 01.03

a

b

form errorValidation rules will be checked the first time the user triggers the save or submit command. All validation errors will be shown on the form. Error indication disappears from the moment the user corrects the error and leaves the field.

[a][b] exclamationErrors are indicated by the exclamation mark.

[c] pivot titleHovering over the active pivot title will show all error messages. The exclamation mark will stay as long one filed in the pivot contains an error.

[d] hover areaMouse over the icon shows the error information in a tooltip.

c

a

b

cd

version 01.03

pivot content:listsLists represent a dataset. Every item in a list represents a data object.

[a] list no selectThe list is for information only. The user is not able to

select an item from the list.

[b] list single selectThe user can select one and only one item at a time.

[c] list multi selectThe user can select 0, 1 or more items from the list. He

can also deselect items.

a b c

version 01.03

command placementThe first step is to identify all the app commands and

organize them by functionality.

[a] command sets Group commands into command sets. The app bar displays

command sets as a unit, with a [b] divider between the sets.

[c] menus Consider whether your command sets would work better in a

command menu. Menus let you present more options in

less space and include interactive controls. A menu is a fly

out and follows the rules for fly outs.

placement rulesThere are a few ways to position commands within the app bar, and variations may occur depending upon certain circumstances. Below are command placement rules that should be followed whenever possible.

predictability To the extent possible, use consistent interaction and

command placement across all views of your app.

ergonomics Consider how the placement of specific commands can

improve the speed or ease with which a command can be

acted upon.

aesthetics Limit the number of commands to avoid the app bar from

looking complicated. Choose icons that are easy to

understand or predict. Keep text labels short.

a c

b

version 01.03

buttonsA button is not a command but a command is a button. Buttons are used when user interaction is required outside the appbar. Buttons are used in fly outs, dialog messages and in some cases in pivots.

There can only be one primary button on a screen.

[a] primary button[b] secondary button

[] button groups[c] allowed[d] allowed[e] not allowed

a secondary button

a primary button

a button a buttona button

a buttona button

a buttona buttona button

b

a

c

d

e

80 page document

style

the

one philosophyone framework

from analysisto developmentand testing

I’ll repeat it once

Style guide

80 page document

The Unified Modeling Language™ - UML - is OMG's most-used specification, and the way the world models not only application structure, behavior, and architecture, but also business process and data structure.

Use Case diagramsClass diagramsBPMN diagrams

State diagrams

A state diagram in the Unified Modeling Language is a is a diagram, representing the behavior of a system, which is composed of a finite number of states.

It’s getting worse

state diagram1state = screen

state diagram1substate = form

state diagram1substate = list

state diagram1transition = button

The model

becomes the wireframe

states

States are screensor sub screens

Transitions are buttons

Stereotypes are behavior or presentation

VP state model

XML

BMML FILES

prototype

My little black box

demo

next steps

?

thanksquestions?