The document outlines a process for developing a prototype from an initial user journey and information architecture by breaking it down into views, controllers, and a model using an MVC framework, with the views being developed first followed by connecting them with controllers and placeholders for the model components.
1. from User Journey and
Information Architecture
to a working prototype
salvatore.iaconesi@artisopensource.net
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12. 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 filter, 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”)
13. 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.
14.
15.
16.
17.
18. 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/filter 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 finish 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.
19. 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” file 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/
20. 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)
21. 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 configured on your FTP client
check that your smartphone/tablet can go online
22. 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.
23.
24. 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.
25. 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 find one here, for example:
http://www.cssbasics.com/introduction-to-css/
http://www.htmlgoodies.com/primers/html/article.php/3478141/Basic-
HTML-Introduction.htm
26. Upload these files using FTP
to the root of the web space
you will use for the prototype
27. the “template.html” file is a starting point
to create all your App’s screens
it includes the javascript libraries,
a set of CSS files to allow transforming
the interface when the user turns the device
from landscape to portrait and viceversa
29. lines 3 to 15 contain the HEAD section of the HTML,
used to configure the page
lines 16 to 35 contain the BODY of the page, where the
content is
30. In the HEAD of template.html
this defines a screen that adapts to
your device’s full width and height
31. In the HEAD of template.html
this line is commented out for now, and it links to
your jQueryMobile CSS stylesheet
32. In the HEAD of template.html
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
33. In the HEAD of template.html
these two lines here link the jQuery and
jQueryMobile javascript libraries to your page.
34. 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.
35. In the BODY of template.html
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.
36. In the BODY of template.html
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.
37. In the BODY of template.html
there are other “data-” attributes, too. The “data-filter”
attribute tells jQueryMobile to put a filter-box on top of
the list, so that the user can perform a contextual search
while browsing the list.
38. LET’s CREATE
THE APP’s HOME PAGE
duplicate the “template.html” file,
rename the copy to “index.html”
edit it with your text editor
make sure to edit the file 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.
39. EDIT the “index.html” file, 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
41. 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 file 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/
43. 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.
44. 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 fixed positioning
at the bottom of our page
45. 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.
47. 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”
48. 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
49. 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
50. Make 4 copies of the “index.html” file
and rename them to
scan.html
list.html
visualization.html
yourMuseum.html
these will be the pages which we will use for the functions
52. To each link (<a> tag) add a “data-transition” element to
configure 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
53.
54. Empty the “content” DIV of each of the other files
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
58. 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
59. 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
60. 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 define 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)
61. 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
62. This process can continue in the same way, to
implement the prototype of the whole App
63. 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/
64. 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, notifications 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.
65.
66.
67. 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
68. 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 final prototype
salvatore.iaconesi@artisopensource.net