From Design to UML to Working Wireframe
-
Upload
ux-antwerp-meetup -
Category
Internet
-
view
226 -
download
0
Transcript of 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?