UX Antwerp Meetup, 29th of September 2015 Steven Verhoest Talk

1. STEVEN VERHOEST
ui/ux designer

2. Since 1993

3. FROM DESIGN TO UML TO
WORKING WIREFRAMES
Ux beers

4. PRODATA MOBILITY SYSTEMS
client

5. PROJECT: MOBIGUIDER
Complete solution for Intelligent Transportation
Systems and
Automatic Fare Collection

6. PROJECT: MOBIGUIDER
My design brief

8. WHAT MAKES A BUSINESS
APPLICATION
question

9. WHAT ARE THE CORE ELEMENTS
question

10. FORMS - LISTS - NAVIGATION

11. 11

12. style
the

13. version 01.03
navigation
window types
The 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] window
A 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-panel
An 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-panel
Use 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-view
The 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.
a
b
c
d
e

14. version 01.03
landing page
the 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] modules
A 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] tiles
Tiles 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 feedback
a tile can contain user feedback, so the landing page can act
as a dashboard
[d] tile color
The 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] red
use red only for high level warnings, for business critical
warnings, things that have to be done by the user before
anything else
[g] screen size
A 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
e
g

15. version 01.03
pivot
Each 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] navigation
Clicking 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.
[!] shortcuts
You 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

16. version 01.03
pivot content:
form
A 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

17. version 01.03
a
b
form error
Validation 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] exclamation
Errors are indicated by the exclamation mark.
[c] pivot title
Hovering 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 area
Mouse over the icon shows the error information in a
tooltip.
c
a
b
c
d

18. version 01.03
pivot content:
listsLists represent a dataset. Every
item in a list represents a data
object.
[a] list no select
The list is for information only. The user is not able to
select an item from the list.
[b] list single select
The user can select one and only one item at a time.
[c] list multi select
The user can select 0, 1 or more items from the list. He
can also deselect items.
a b c

19. version 01.03
command
placement
The 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 rules
There 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

20. version 01.03
buttons
A 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

21. 80 page document

22. style
the
one philosophy
one framework
from analysis
to development
and testing

23. I’ll repeat it once

24. Style guide
80 page document

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

35. Use Case diagrams
Class diagrams
BPMN diagrams

36. State diagrams

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

39. It’s getting worse

40. state diagram
1state = screen

41. state diagram
1substate = form

42. state diagram
1substate = list

43. state diagram
1transition = button

44. 44

45. The model

46. becomes the wireframe

47. states
States are screens
or sub screens

48. Transitions are buttons

49. Stereotypes are
behavior or
presentation

50. VP state model
XML
BMML FILES
prototype
My little black box

52. demo

53. next steps

55. thanks
questions?