Master UX from design to prototype

  • 868 views
Uploaded on

My lecture and exercise at the Master UX at La Sapienza University of Rome. …

My lecture and exercise at the Master UX at La Sapienza University of Rome.

First lesson. More will follow.

more info at
http://www.masterux.it/

More in: Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • The link provided in Slide 20 appears to be broken.
    http://www.designinteraction.it/mio/MasterUX_software_kit.zip
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
868
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
19
Comments
1
Likes
6

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Transcript

  • 1. from User Journey andInformation Architectureto a working prototypesalvatore.iaconesi@artisopensource.net
  • 2. 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 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”)
  • 3. EXAMPLE map showing different categories of geo-pointsSTATE NAME: show map with categoriesINFORMATION 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.
  • 4. 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/filter the list of artworksin 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 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.
  • 5. 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/
  • 6. 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)
  • 7. 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 configured on your FTP clientcheck that your smartphone/tablet can go online
  • 8. 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.
  • 9. We will make the App using HTML5 + JavaScript + CSSin a way that it will be usable from most smartphones and tabletsthere are some limitations:you cannot use the camerayou cannot access many native elements of the phoneso for now we will simulate all thesebut, in the end, I will show you how to enable them, in a way which works acrossall platforms.
  • 10. 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 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
  • 11. Upload these files using FTP to the root of the web space you will use for the prototype
  • 12. 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
  • 13. template.htmllet’s open it up on the text editor to see how it’s done
  • 14. lines 3 to 15 contain the HEAD section of the HTML,used to configure the pagelines 16 to 35 contain the BODY of the page, where thecontent is
  • 15. In the HEAD of template.html this defines a screen that adapts to your device’s full width and height
  • 16. In the HEAD of template.html this line is commented out for now, and it links to your jQueryMobile CSS stylesheet
  • 17. 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
  • 18. In the HEAD of template.html these two lines here link the jQuery and jQueryMobile javascript libraries to your page.
  • 19. 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.
  • 20. 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.
  • 21. 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.
  • 22. 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.
  • 23. LET’s CREATETHE APP’s HOME PAGEduplicate the “template.html” file,rename the copy to “index.html”edit it with your text editormake 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.
  • 24. 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
  • 25. UPLOAD THE“index.html” file using FTP
  • 26. 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 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/
  • 27. LET’S TRANSFORM OUR “index.html”INTO THE APP’S HOME SCREEN
  • 28. 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.
  • 29. 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 fixed positioningat the bottom of our page
  • 30. 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.
  • 31. this is what weobtain
  • 32. 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”
  • 33. 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
  • 34. 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
  • 35. 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
  • 36. In the “index.html” file replace the “#” with these page names
  • 37. To each link (<a> tag) add a “data-transition” element toconfigure 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
  • 38. Empty the “content” DIV of each of the other filesJust 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
  • 39. For example my “list.hml” page now has become like this
  • 40. let’s create the list ofartworks in the “list.html” page
  • 41. 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
  • 42. 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
  • 43. 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)
  • 44. 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
  • 45. This process can continue in the same way, to implement the prototype of the whole App
  • 46. 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/
  • 47. 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, notifications 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.
  • 48. Workflow 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 defined and used to understand test results; need for change or fixing might emerge at thisstage, and the team will, thus, probably redesign some elements to leverage these insightsFinalize version: eventually, things work out fine :) When this happens, we can move from prototype to the full version
  • 49. 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 final prototype salvatore.iaconesi@artisopensource.net