Master UX from design to prototype

from User Journey and
Information Architecture
to a working prototype

salvatore.iaconesi@artisopensource.net

EXAMPLE from the “browse products” list to the shopping cart

STATE NAME: browse products list

INFORMATION INPUT/INTERACTION ACTIONS

- list of products - input search term update_list(product category,
with name, page, search ﬁlter, sorting options)
thumbnail - selection list of Goes to the “browse products list” state.
image, price, product categories Shows the updated product list
short description visualization
- control to change sorting
- page number in list, buy_product(product number,
pagination information - list paging navigation quantity)
controls Goes to the “shopping cart” state.
- product category Shows the updated shopping cart.
- buy control, with
... indication of quantity
(preset to “1”)

EXAMPLE map showing different categories of geo-points

STATE NAME: show map with categories

INFORMATION INPUT/INTERACTION ACTIONS

- map of the geographical - filter controls, to choose update_visualization(geo-context,
area what types of icons you category filter, search terms)
want to see on map Goes to the “show map with categories”
- icons of the points in the state.
visualized area - map navigation controls Shows the updated map (as result of map
navigation) and geo-points (as result of
- legend for the icons and - search field, to search category filter and search terms)
map details geo-points which contain
a certain term get_detail(geo-point identificator)
Goes to the “geo-point detail” state.
- click on icons, to get Shows the detailed information of the
geo-points detail point the user clicked.

LET’S TRY IT with this scenario

A man walks into the museum. He purchases the ticket. On the ticket is a QRCode. He scans it with his
smartphone and accesses the Museum App.
Each artwork in the museum has a label with a QRCode.
When you scan it, you get detailed information of the artwork, as well as the list of artworks which are related
to it in some way.
If you select one of them, you get the directions to go to it.
The app can be used to see the list of artworks you’ve already seen, to browse/search/ﬁlter the list of artworks
in the museum, and, for each artwork, to see the comments and ratings other users have left about it.
When you ﬁnish your tour, you can use the App to create “Your Tour of the Museum”, which can be shared on
social networks.
“Your Tour of the Museum” can be used at the Museum’s bookshop to print out and purchase a personalized T-
Shirt.
The App also shows a visualization of visitors’ favourite spots of the Museum, which is also shown at the
Museum’s entrance as a projection.

WHAT YOU WILL NEED

a text editor (we use this: http://www.sublimetext.com/ )

some space online and an FTP access to it
(for the Master UX students: look for your accesses in the “dati_FTP.txt” ﬁle I gave you)

a smartphone/tablet to test it

some javascript libraries:
jQuery: http://jquery.com/
jQuery Mobile: http://jquerymobile.com/
Processing JS: http://processingjs.org/

Processing: http://processing.org/

I have created a software kit for you.
You can download it here:

http://www.designinteraction.it/mio/MasterUX_software_kit.zip
(Note for students: the files I gave you in class include an additional
text file which describes the FTP accesses I created for
you to upload the files to your group’s webspace)

install everything and make sure that everything is working:

install the text editor

check that your web space is accessible online
for the Master UX students: your web spaces are at
http://www.designinteraction.it/gruppo1
http://www.designinteraction.it/gruppo2

check that your FTP account is correctly conﬁgured on your FTP client

check that your smartphone/tablet can go online

OK, let’s start
remember, we’re building a prototype

the objective is to have something usable, that will
give the idea of what it feels like to use the service
and to develop it quickly, without using too
much time/resources, so that it does not
cost us too much to change something, and to
quickly arrive at the version we like, to develop it completely.

Here we will not cure the visuals of the prototype too much.
Please cure them more on your prototype, as its
visual style is fundamental for the user experience.

We will make the App using HTML5 + JavaScript + CSS
in a way that it will be usable from most smartphones and tablets

there are some limitations:
you cannot use the camera
you cannot access many native elements of the phone

so for now we will simulate all these

but, in the end, I will show you how to enable them, in a way which works across
all platforms.

Note: you need some working knowledge
about HTML and CSS for this part
please look at a good introductory level tutorial
if you don’t know anything about HTML or CSS
You can ﬁnd one here, for example:

http://www.cssbasics.com/introduction-to-css/

http://www.htmlgoodies.com/primers/html/article.php/3478141/Basic-
HTML-Introduction.htm

Upload these ﬁles using FTP
to the root of the web space
you will use for the prototype

the “template.html” ﬁle is a starting point
to create all your App’s screens
it includes the javascript libraries,
a set of CSS ﬁles to allow transforming
the interface when the user turns the device
from landscape to portrait and viceversa

template.html
let’s open it up on the text editor to see how it’s done

lines 3 to 15 contain the HEAD section of the HTML,
used to conﬁgure the page

lines 16 to 35 contain the BODY of the page, where the
content is

In the HEAD of template.html

this deﬁnes a screen that adapts to
your device’s full width and height


this line is commented out for now, and it links to
your jQueryMobile CSS stylesheet


these two lines here link two CSS files to the page:
one will be used when the device is in landscape
mode (horizontal), one for portrait mode (vertical)
the files are configured for iPAD


these two lines here link the jQuery and
jQueryMobile javascript libraries to your page.

In the BODY of template.html

the body of a page can be grouped together using
the DIV elements. Each DIV can represent a block
of content, both logically and visually.


in jQueryMobile the “data-role” attribute of HTML
elements is used to describe their role in the interface.
“header”, for example, means the component on
top of the page.


for example this “listview” data-role will be used to
transform this standard HTML list into a list-view typical
of the smartphone that visualizes the page.


there are other “data-” attributes, too. The “data-ﬁlter”
attribute tells jQueryMobile to put a ﬁlter-box on top of
the list, so that the user can perform a contextual search
while browsing the list.

LET’s CREATE
THE APP’s HOME PAGE

duplicate the “template.html” ﬁle,
rename the copy to “index.html”
edit it with your text editor

make sure to edit the ﬁle using a text editor, one which handles only pure text, not formatting, alignment, or else. The
“sublime” editor included in the KIT linked a few slides ago is one of these types of editors.

EDIT the “index.html” ﬁle, make it look like this:

remove the comment on line 7

set an interesting title for the home page

empty the content DIV, as
we’ll be adding our own really soon

UPLOAD THE
“index.html” ﬁle
using FTP

TIP:
constantly test what you’re doing.

Open the App prototype you are creating.
Use your smartphone/tablet, and refresh the page
at every change you make (every time you upload
the updated ﬁle using FTP)
if you don’t have a smartphone/tablet,
you can at least use one of the many ones
which are available online, such as

http://alexw.me/ipad2
http://ipadpeek.com/

LET’S TRANSFORM
OUR “index.html”
INTO THE APP’S HOME SCREEN

Let’s keep it simple for now:

according to the state diagram the home screen includes:

- function to scan the QRCode of an artwork
- function to go to the list of artworks in the museum
- function to go to the “what visitors like” visualization
- function to go to the “Your Museum” screen

We can place the “scan QRCode” function in the middle of the
screen, to make it really accessible.

We can put all the rest in a tab-bar at the bottom of the screen.

the “data-id” attribute will be the same
in all our pages. In this way jQueryMobile
will know that it is always the same footer,
and it will keep it visible during content
transitions

let’s add a footer with ﬁxed positioning
at the bottom of our page

we can use images (for example icons)
instead of the labels.
To do this we replace the label with an
“img” HTML tag.

for example we could replace the “Artworks”
label with this tag:

<img src=”artworks-icon.png” border=”0” />

the “artworks-icon.png” would be a PNG image
of the icon, to be uploaded via FTP to the same
folder where the “index.html” is.

let’s add a navigation bar in our footer.
the bar will include a list of navigation links.

let’s create the image
for the button which we will click
to scan the QRCode of an artwork

we will save it as a PNG image
with transparent background

let’s call it “scan.png”

let’s add the control to our “content” DIV

we obtain
this:

remember: we will take care of
the aesthetics after this tutorial, using CSS and graphics
for now let’s just simplify things and
let’s add everything that is needed on the interface,
and let’s make it work

Now everything we need is on the Home Screen
we now have to make the various components
actually do something when the user touches them

we will do it by replacing the “#” element in the controls
with the indication of the page which represents the action’s result

Make 4 copies of the “index.html” ﬁle
and rename them to

scan.html
list.html
visualization.html
yourMuseum.html

these will be the pages which we will use for the functions

In the “index.html” ﬁle replace the “#”
with these page names

To each link (<a> tag) add a “data-transition” element to
conﬁgure a transition between the pages

for example adding

data-transition=”pop”

will add a nice transition to the way in which the next interface appears

a list of transitions can be found here:

http://jquerymobile.com/demos/1.2.0/docs/pages/page-transitions.html

Empty the “content” DIV of each of the other ﬁles
Just erase everything inside the <div></div> element

Make sure that the links (<a> tags) in all the pages have the
same transitions, for consistency
Just copy them across all the pages, so that they are the same

For example my “list.hml” page now has become like this

let’s create the list of
artworks in the “list.html” page

data-role=”listview” creates a
data-filter=”true” adds a nice this includes a placeholder
typical selection list on your
search bar which we can text in the search field
tablet or smartphone
use to filter the elements

each element of the list is
an item of the listview

I added 4, but you can add
as many as you want

each item can have its own
icon, just draw them, upload
them to the FTP folders and
put the right name in place
of the one I used

The content of each item can
be formatted using HTML in
any
way you want

for simplicity, in this example,
I put in the link all the same
destination.
This means that whatever
artwork I choose from the
list, the same detail page will
appear.

You can obviously provide
different links for the different
items to provide different
detail screens.

Or if you have time, you can
create a database and
generate the details
dynamically

and these are the Header and Content DIVs of the “artworkDetail.html” page
a “back” button to go back to the list

a “forward” button to receive the
directions to go to the selected
artwork

an example of GRID to layout
content nicely on all screens
(look at http://jquerymobile.com/
demos/1.2.0/docs/content/content-
grids.html for more info )

some placeholder content

another header, to deﬁne the start of
the section which lists the related
artworks
another grid to nicely hold the
thumbnails and links to the related
artworks (here, as well, we’re
pointing the links to the same
artwork details: you might want to
add more variety in your prototype,
by creating multiple pages or to use a
database)

and is a simple version of what the BODY of the “path.html” page could be
a simple DIV containing the image of
a map of the museum which
highlights the path from your current
location to the selected artwork

but we could develop a more
interactive version of this, and make
the prototype behave better

This process can continue in the same way, to
implement the prototype of the whole App

For apps:

some functionalities (such as using the camera, the contact list, teh
accelerometer...) require native functionalities which are not
available through HTML+CSS+JavaScript

We can use platforms like Phonegap to put our HTML5 prototype
into a native App, thus avoiding to re-develop everything for each
platform (e.g.: write one prototype using jQueryMobile, then put it into
Phonegap and deploy natively on each platform)

more information here:
http://phonegap.com/

MVC: Model View Controller
It is a way to divide all the components which make a service, so that
logic is divided from presentation elements, and to facilitate teams to
work together effectively.

the MODEL is made by the database, the transaction systems and all those things which compose
the infrastructure for the service.
In the prototype we mostly develop placeholders for the Model

the VIEW is composed by the interfaces, the visuals, the signage, by what we directly experience of
the service touchpoints.
In the prototype we aim at creating the best possible View, with the least effort.

the CONTROLLER is composed by the software elements, by the alerts, notiﬁcations and
procedures which interconnect Views to the Model, and back.
In the prototype we implement barebones Controllers whose objective is to
allow us to perform a complete User Journey.

Workflow explained
Conceptualize: all the team works together to create the concept; users are engaged to gain insights; the user journey
is created; some sketches are produced;

Agree/Structure: the Information Architecture is created; the State Diagram is created; its pieces are broken down
into Information/Input/Actions; these are used to describe the Views which will compose the service, the Controllers
which will coordinate them and the Model components; modalities and protocols for exchanging information from one to
the other are agreed upon, too;

Develop:Views are developed with the aid of visual designers, supported by developers; Controllers are mostly created
by developers, who also create most parts of the placeholders of Model components, or who integrate those ones which
are already existing.

Assemble: everyone gets together and the MVC components are interconnected to create this iteration of the
prototype; adjustments will be needed; get ready for late nights :)

Test: internal tests are performed; then users are engaged and asked to use the prototype;

Evaluate: metrics shall be defined and used to understand test results; need for change or fixing might emerge at this
stage, and the team will, thus, probably redesign some elements to leverage these insights

Finalize version: eventually, things work out fine :) When this happens, we can move from prototype to the full version

in the next lesson
we will see how to prototype for things
which are different from an App

we will use Model components with more
dynamics, to allow information to propagate
from one part of the prototype to the other

we will start the ﬁnal prototype

salvatore.iaconesi@artisopensource.net

Master UX from design to prototype

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (20)

Similar a Master UX from design to prototype

Similar a Master UX from design to prototype (20)

Más de Salvatore Iaconesi

Más de Salvatore Iaconesi (20)

Último

Último (20)

Master UX from design to prototype

Notas del editor