View stunning SlideShares in full-screen with the new iOS app!Introducing SlideShare for AndroidExplore all your favorite topics in the SlideShare appGet the SlideShare app to Save for Later — even offline
View stunning SlideShares in full-screen with the new Android app!View stunning SlideShares in full-screen with the new iOS app!
from User Journey andInformation Architectureto a working firstname.lastname@example.org
EXAMPLE from the “browse products” list to the shopping cart STATE NAME: browse products listINFORMATION 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-pointsSTATE NAME: show map with categoriesINFORMATION INPUT/INTERACTION ACTIONS- map of the geographical - ﬁlter controls, to choose update_visualization(geo-context, area what types of icons you category ﬁlter, 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 ﬁeld, to search category ﬁlter and search terms) map details geo-points which contain a certain term get_detail(geo-point identiﬁcator) 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 scenarioA man walks into the museum. He purchases the ticket. On the ticket is a QRCode. He scans it with hissmartphone 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 relatedto 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 artworksin 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 onsocial 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 theMuseum’s entrance as a projection.
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 ﬁles I gave you in class include an additional text ﬁle which describes the FTP accesses I created for you to upload the ﬁles to your group’s webspace)
install everything and make sure that everything is working:install the text editorcheck that your web space is accessible onlinefor the Master UX students: your web spaces are athttp://www.designinteraction.it/gruppo1http://www.designinteraction.it/gruppo2check that your FTP account is correctly conﬁgured on your FTP clientcheck 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 toquickly 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.
Note: you need some working knowledgeabout HTML and CSS for this partplease look at a good introductory level tutorialif you don’t know anything about HTML or CSSYou 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
template.htmllet’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 pagelines 16 to 35 contain the BODY of the page, where thecontent is
In the HEAD of template.html this deﬁnes a screen that adapts to your device’s full width and height
In the HEAD of template.html this line is commented out for now, and it links to your jQueryMobile CSS stylesheet
In the HEAD of template.html these two lines here link two CSS ﬁles to the page: one will be used when the device is in landscape mode (horizontal), one for portrait mode (vertical) the ﬁles are conﬁgured for iPAD
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 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.
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.
In the BODY of template.html 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 CREATETHE APP’s HOME PAGEduplicate the “template.html” ﬁle,rename the copy to “index.html”edit it with your text editormake 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
TIP: constantly test what you’re doing. Open the App prototype you are creating.Use your smartphone/tablet, and refresh the pageat 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” screenWe can place the “scan QRCode” function in the middle of thescreen, 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 transitionslet’s add a footer with ﬁxed positioningat 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 imagefor the button which we will clickto scan the QRCode of an artworkwe will save it as a PNG imagewith transparent backgroundlet’s call it “scan.png”
let’s add the control to our “content” DIV we obtain this:remember: we will take care ofthe aesthetics after this tutorial, using CSS and graphicsfor now let’s just simplify things andlet’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 toconﬁgure a transition between the pagesfor example addingdata-transition=”pop”will add a nice transition to the way in which the next interface appearsa 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 ﬁlesJust erase everything inside the <div></div> elementMake sure that the links (<a> tags) in all the pages have thesame transitions, for consistencyJust 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 ofartworks in the “list.html” page
data-role=”listview” creates a data-ﬁlter=”true” adds a nice this includes a placeholder typical selection list on your search bar which we can text in the search ﬁeld tablet or smartphone use to ﬁlter 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 samedestination.This means that whateverartwork I choose from thelist, the same detail page willappear.You can obviously providedifferent links for the differentitems to provide differentdetail screens.Or if you have time, you cancreate a database andgenerate the detailsdynamically
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
MVC: Model View ControllerIt is a way to divide all the components which make a service, so thatlogic is divided from presentation elements, and to facilitate teams towork together effectively.the MODEL is made by the database, the transaction systems and all those things which composethe infrastructure for the service.In the prototype we mostly develop placeholders for the Modelthe VIEW is composed by the interfaces, the visuals, the signage, by what we directly experience ofthe 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 andprocedures which interconnect Views to the Model, and back.In the prototype we implement barebones Controllers whose objective is toallow us to perform a complete User Journey.
Workﬂow explainedConceptualize: all the team works together to create the concept; users are engaged to gain insights; the user journeyis created; some sketches are produced;Agree/Structure: the Information Architecture is created; the State Diagram is created; its pieces are broken downinto Information/Input/Actions; these are used to describe the Views which will compose the service, the Controllerswhich will coordinate them and the Model components; modalities and protocols for exchanging information from one tothe other are agreed upon, too;Develop:Views are developed with the aid of visual designers, supported by developers; Controllers are mostly createdby developers, who also create most parts of the placeholders of Model components, or who integrate those ones whichare already existing.Assemble: everyone gets together and the MVC components are interconnected to create this iteration of theprototype; 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 deﬁned and used to understand test results; need for change or ﬁxing might emerge at thisstage, and the team will, thus, probably redesign some elements to leverage these insightsFinalize version: eventually, things work out ﬁne :) When this happens, we can move from prototype to the full version
in the next lessonwe will see how to prototype for thingswhich are different from an Appwe will use Model components with moredynamics, to allow information to propagatefrom one part of the prototype to the otherwe will start the ﬁnal prototype email@example.com