Developing Mobile Applications KTH / ID2216 / 2014 / Tollmar / Devlic

Transcription

1 Developing Mobile Applications KTH / ID2216 / 2014 / Tollmar / Devlic 28/01/14 ID2216 / 2014 / Tollmar / Devlic 1 Today s admin New students need to find a group - Contact Alisa and / or search on KTH Social Mandatory labs: - A1 A5 - Project Triage / Presenation - Missed 1: Ok 2: Extra assignment 3: Extra-Extra assignment 4: Out,( 28/01/14 ID2216 / 2014 / Tollmar / Devlic 2

2 F3. Mobile Web Apps Outline What is a mobile app? [chap6] Mobile Web Apps Versus Native Applications [chap9] Mobile Information architecture [chap7] Mobile Web design [chap8] Mobile Web Development [chap11] User Testing [ref] Assignment 2 4

3 What is a mobile app? What is a mobile app? There are many different kinds of application and service framework on a mobile platform Brick / Candy / Feature / Smart 28/01/14 ID2216 / 2014 / Tollmar / Devlic 6

4 What is a mobile app? Mobile medium type Integrated: SMS, Calling, Camera, Mobile Web Applications Native Apps Samsung-C3780 New Hybrid 28/01/14 ID2216 / 2014 / Tollmar / Devlic 7 Mobile Web Apps Versus Native Applications

5 Mobile Web Apps Versus Native Applications 28/01/14 ID2216 / 2014 / Tollmar / Devlic 9 Mobile Web Apps Versus Native Applications 28/01/14 ID2216 / 2014 / Tollmar / Devlic 10

6 Mobile Web Apps Versus Native Applications WebKit versus PhoneOS The overall technology market is going to the Web When to make a native app: - Games / Location / Sensors / Filesystem / Offline - Radically new UEX, Download a big app, more? 28/01/14 ID2216 / 2014 / Tollmar / Devlic 11 Mobile Apps Information Architectures

7 Web Information architect The structural design of shared information environments The combination of organizations, labeling, search, and navigation systems within websites and intranets The art and science of shaping information products and experiences to support usability and findability An emerging discipline and community of practice focused on bringing principles of design and architecture to the digital landscape [Morville and Rosenfeld 2002] 28/01/14 ID2216 / 2014 / Tollmar / Devlic 13 Mobile Information Architecture: Keep it simple,) Site Maps: Relationship of content Clickstream: Showing the behavior on websites Wireframes: Lay out information on the page Paper prototypes: Wireframes shows static views but not interaction. HTML prototype: Semifunctional static prototype using XHTML, CSS, and JavaScript 28/01/14 ID2216 / 2014 / Tollmar / Devlic 14

8 Field Study Use cases / Scenarios Paper prototype Test Site map / Clickstream Interactive prototype Test Wireframes Development Site maps Classic information architecture in the Web List of views in a hierarchical fashion Represent relationships of content Provide a map to travel the information space

9 Clickstreams Shows the behavior of the user o How the user travels When to do it: o In the beginning! Visually lay out the paths! Holistic view like a road map! Used to see possible shortcuts o In the end! Log usage information! Heat-mapping! Percentage of "clicks"! Used to detect flaws in the information architecture! Possible ethical implications

10 Mobile Design and Development, Brian Fling, O'Reilly Media, August 2009 Site maps VS Clickstreams Site maps o How the views are structured and their relationships Clickstreams o How the user can travel between the views

11 Wireframes 28/01/14 ID2216 / 2014 / Tollmar / Devlic 21 Mobile Web design

12 Mobile Web design Designing for the Best Possible Experience MUX: Truly understand the mobile user experience: - Who are the users? - What is happening? - When will they interact? - Where are the users? - Why will they use your app? - How are they using their mobile device? 23 Mobile Web design Message Look & Feel Layout: - Color, Text, Icon 24

13 Typical App Composition A single window or stack of windows Tab Group containing many windows Windows contain views 25 Mobile Web Development

14 Web Stds HTML, XHTML, WML, XHTML Basic, XHTML-MP, etc - XHTML (Extensible HyperText Markup Language) is a family of XML markup languages that extend HTML. - CSS: Cascading Style Sheets - Cascading Style Sheets (CSS) is a style sheet language - JavaScript: - JavaScript (JS) is an open source programming language commonly implemented as part of a web browser in order to create enhanced user interfaces and dynamic websites. - JavaScript, DHTML, Ajax /01/14 ID2216 / 2014 / Tollmar / Devlic 27 Mobile Web Development Tools iphone: - Photoshop, Interface Builder. iphone SDK Android: - Photoshop, XML-based themes. Android SDK Mobile web: - Photoshop, HTML, CSS, and JavaScript. W3C Mobile Web Best Practices Mobile web apps: - Photoshop, HTML, CSS, and JavaScript. iui, jqtouch, W3C Mobile Web App Best Practices 28/01/14 ID2216 / 2014 / Tollmar / Devlic 28

15 Mobile Web Development Tools Tools: - Paper prototypes - HTML5 - JavaScript - GUI Builders - Phone Gap 28/01/14 ID2216 / 2014 / Tollmar / Devlic 29 balsamiq 28/01/14 ID2216 / 2014 / Tollmar / Devlic 30

16 Pencil 28/01/14 ID2216 / 2014 / Tollmar / Devlic 31 HTML5 HTML5 will be the new standard for HTML. Some rules for HTML5 were established: - New features should be based on HTML, CSS, DOM, and JavaScript - Reduce the need for external plugins (like Flash) - Better error handling - More markup to replace scripting - HTML5 should be device independent - The development process should be visible to the public 28/01/14 ID2216 / 2014 / Tollmar / Devlic 32

17 HTML5 Some of the most interesting new features in HTML5: - The <canvas> element for 2D drawing - The <video> and <audio> elements for media playback - Support for local storage - New content-specific elements, like <article>, <footer>, <header>, <nav>, <section> - New form controls, like calendar, date, time, , url, search 28/01/14 ID2216 / 2014 / Tollmar / Devlic 33 Basic HTML5 <!DOCTYPE html> <html> <head> <title>title of the document</title> </head> <body> The content of the document... </body> </html> 28/01/14 ID2216 / 2014 / Tollmar / Devlic 34

18 JavaScript JavaScript is Scripting Language that can be inserted into HTML pages, can be executed by all modern web browsers. And soon also mobile web browsers JavaScript is easy to learn: - Writing Into HTML Output - Reacting to Events - Changing HTML Content - Changing HTML Styles - Validate Input 28/01/14 ID2216 / 2014 / Tollmar / Devlic 35 JavaScript JavaScript How To Scripts in HTML must be inserted between <script> and </script> tags. Scripts can be put in the <body> and in the <head> section of an HTML page. But also external JavaScripts Example: Reacting to Events <button type="button" onclick="alert('welcome!')">click Me!</button> 28/01/14 ID2216 / 2014 / Tollmar / Devlic 36

19 JavaScripts Example: Events <!DOCTYPE html> <html> <body> <h1>my First JavaScript</h1> <p> JavaScript can react to events. Like the click of a button: </p> <button type="button" onclick="alert('welcome!')">click Me!</button> </body> </html>" " " 28/01/14 ID2216 / 2014 / Tollmar / Devlic 37 JavaScripts Example: Date <!DOCTYPE html> <html> <head> <script> function displaydate() { document.getelementbyid("demo").innerhtml=date(); } </script> </head> <body> <h1>my First JavaScript</h1> <p id="demo">this is a paragraph.</p> <button type="button" onclick="displaydate()">display Date</ button> </body> </html> 28/01/14 " ID2216 / 2014 / Tollmar / Devlic 38

20 JavaScripts Example: Canvas <!DOCTYPE html> <html> <body> <canvas id="mycanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag.</canvas> <script> var c=document.getelementbyid("mycanvas"); var ctx=c.getcontext("2d"); ctx.moveto(0,0); ctx.lineto(200,100); ctx.stroke(); </script> </body> </html> 28/01/14 " ID2216 / 2014 / Tollmar / Devlic 39 jqtouch / JQuery Mobile jquery Mobile is a touch-optimized mobile web framework in JavaScript: - Compatible with all major mobile platforms as well as all major desktop browsers - Built on top of jquery core so it has a minimal learning curve for people already familiar with jquery syntax. - Theming framework that allows creation of custom themes. - Limited dependencies and lightweight to optimize speed. - HTML5-driven configuration for laying out pages with minimal scripting - Ajax-powered navigation with animated page transitions that provides ability to clean URLs through pushstate. - UI widgets that are touch-optimized and platform-agnostic 28/01/14 ID2216 / 2014 / Tollmar / Devlic 40

21 JQuery Mobile Example: Lists <!DOCTYPE html> <html> <head> <title>page Title</title> " <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href=" jquery.mobile min.css" /> <script src=" <script src=" jquery.mobile min.js"></script>" </head> " <ul data-role="listview">" " "<li><a href="index.html">acura</a></li> " "<li><a href="index.html">audi</a></li> " "<li><a href="index.html">bmw</a></li> " "<li><a href="index.html">cadillac</a></li> " "<li><a href="index.html">chrysler</a></li> " "<li><a href="index.html">dodge</a></li> " "<li><a href="index.html">ferrari</a></li> " "<li><a href="index.html">ford</a></li> " "<li><a href="index.html">gmc</a></li> " "<li><a href="index.html">honda</a></li> "<ul> </html> " 28/01/14 ID2216 / 2014 / Tollmar / Devlic 41 Try on a real device Online: filename=tryhtml_basic 28/01/14 ID2216 / 2014 / Tollmar / Devlic 42

22 GUI Builders / RIB 28/01/14 ID2216 / 2014 / Tollmar / Devlic 43 RIB Preview 28/01/14 ID2216 / 2014 / Tollmar / Devlic 44

23 Some more Mobile App Tools HTML Java / Javascript - Drag and drop - More tools and links /01/14 ID2216 / 2014 / Tollmar / Devlic 45 Mobile Apps Testing

24 Observe, Innovate, Design, Build and Run Mobile UX Observation Deploy Ideation Build Design 28/01/14 ID2216 / 2014 / Tollmar / Devlic 47 Observe, Innovate, Design, Build and Run Mobile UX Observation Deploy Ideation Test Test Build Test Design 28/01/14 ID2216 / 2014 / Tollmar / Devlic 48

25 Field Study Brainstorming / Conceptul design Use cases / Scenarios / Paper prototype Test Site map / Clickstream Interactive prototype Developing Mobile Apps Test Wireframes Development 28/01/14 ID2216 / 2014 / Tollmar / Devlic 49 Test Methods User testing Usability testing QoE QoS 28/01/14 ID2216 / 2014 / Tollmar / Devlic 50

26 User Testing Four%evalua*on%paradigms% Quick%and%Dirty % Field%Studies% Predic*ve%Evalua*on%% Usability%Tes*ng% 52

27 Quick%and%Dirty% Quick%&%Dirty %evalua*on%describes%the%common%prac*ce%in%which% designers%informally%get%feedback%from%users%or%consultants%to% confirm%that%their%ideas%are%infline%with%users %needs%and%are%liked.% 53 Think aloud Hard to see what is happening Ask subjects to speak-out and describe: - Goals / Tasks / Feedback / Problems 54

28 Wizard of oz In stead of a working prototype a wizard it works like magic Works well for systems that are hard to build (natural language and such) 28/01/14 ID2216 / 2014 / Tollmar / Devlic 55 Field%studies% Field%studies%are%done%in%natural%seHngs.% The%aim%is%to%understand%what%users%do%naturally%and%how% technology%impacts%them.% 56

29 Experience sampling method This research methodology, developed by Larson and Csikszentmihalyi (1983)[1] asks participants to stop at certain times and make notes of their experience in real time. The point is for them to record temporal things like feelings while in the moment (right then, not later; right there, not elsewhere). They can be given a journal with many identical pages. Each page can have a psychometric scale, open-ended questions, or anything else used to assess their condition in that place and time. 57 ID2216 / 2014 / Tollmar / Devlic 58

30 ID2216 / 2014 / Tollmar / Devlic 59 Research in the large and wild Use of app stores as being successful as a methodology for gathering large amounts of data - Games - Video - Health Business & promotion models Informed, representative participants Large-scale data analysis 60

31 Predic*ve%evalua*on% Experts%apply%their%knowledge%of%typical%users,%oKen%guided%by% heuris*cs%(or%theore*cally%based%models),%to%predict%usability% problems.%% A%key%feature%of%predic*ve%evalua*on%is%that%users%need%not%be% present% 61 Usability%tes*ng% Usability%tes*ng%involves%recording%typical%users %performance%on% typical%tasks%in%controlled%sehngs.%% Data%is%collected%to%calculate%performance%*mes,%iden*fy%errors%&% help%explain%why%the%users%did%what%they%did.%% User%sa*sfac*on%ques*onnaires%&%interviews%are%used%to%elicit%users % opinions.%% 62

32 User Testing Best Practice Prepare (and test) - Define realistic (or as real as possible) tasks - Create interview questions - Data collection Pre-interview - What s going to happen, purpose - Back ground (subject and situation) - Consensus Performing Tasks - Carful with key words - Difficult better than to easy - First task could be a bit simpler, warm up - No more than 20 min (preferably,) De-briefing - Ask about first impression and concerns - Repeat consensus - Thank subject for participation 63 Mobile App Usability Testing - Usability testing: Usability testing focuses on measuring a human-made product's capacity to meet its intended purpose. Usability testing measures the usability, or ease of use, of a specific object or set of objects, whereas general human-computer interaction studies attempt to formulate universal principles. - Some Key Criteria: Device specific UI guidelines Text entry Finger sized targets Well organized work flow Consistency Call handling Response times

33 Mobile App Testing - Performance testing: Performance testing is key criteria for the application success on the market. It may happen that application testing is carried though wi-fi network under which application might perform well, but it also happens that application has the poor performance for the end-user who are accessing site through the mobile carries. Application must be tested with different devices + carries wise mix depending on the county and region. - Some Key Criteria Network Battery Volume Rendering Mobile App Testing Compatibility testing: Compatibility testing assures that a given application works as intended with selected devices with different screen sizes, resolutions, internal hardware (memory size, processor speed, and button/ input differences), and operating system. Synchronization testing: This testing focuses on data exchange and synchronization among different mobile devices, PDAs, and PCs using infrared frequency and USB ports.

34 Mobile App Testing Security testing - All the tests relevant to a thick client application can be applicable to mobile applications. - Authentication checks - Input Validation checks - Session Management checks - Encryption checks - Application checks - SQL injection checks - LDAP injection checks - XPATH injection checks Qos Quality of service (QoS) is the overall performance of a telephony or computer network, particularly the performance seen by the users of the network To quantitatively measure quality of service several related aspects of the network service are often considered, such as error rates, bandwidth, throughput, transmission delay, availability, jitter, etc. A crucial part of QoS in mobile communications is grade of service PQoS is the percieved, or subjectively experienced quality, also called QoE 68

35 QoE vs QoS Quality of Experience (QoE or simply QX) is a subjective measure of a customer's experiences with a service QX focuses on the entire service experience, and is a more holistic evaluation than the more narrowly focused UX (user experience, focused on a software interface) and CX (customer experience, support focused) Mean opinion score (MOS) is a test that has been used for decades in telephony networks to obtain the human user's view of the quality of the network. Controlled experiments indicates that QoE in mobile web apps is mostly dependent on server side QoS in the following order: (1) service unavailability, (2) delay and (3) jitter. 69 Test tools! Android%! Apps%for%Mac,%iPhone,%and%iPad%! ToolsLanguages/Conceptual/Xcode_Overview/ UnitTestYourApp/UnitTestYourApp.html! Test%Automa*on%! Mobile%Interac*ve%Tes*ng%Environment%(MITE)%% (hrp://mite.keynote.com/)%! SQUISH%(hRp:// Ranorex%(hRp:// Appium%(hRp://appium.io/)%%F%open%source%! Experitest%(hRp://experitest.com/)%! 3rd%Party%Tes*ng%Labs%! Perfecto%Mobile%(hRp:// Device%Anywhere%(hRp:// TestDroid%(hRp://testdroid.com/)% 70

36 References Mobile Design and Development: MDD: 6-9,15 Mark W. Newman and James A. Landay Sitemaps, storyboards, and specifications: a sketch of Web site design practice, DIS '00, Zakas N. (2013) The evolution of web development for mobile devices. Commun. ACM56, 4 (April 2013), Research2guidance (2013) Cross Platform App Development Tool Benchmarking, research2guidance.com/cross-platform-toolbenchmarking-2013/ Assignment 2: Paper prototypes Develop a paper-prototype based on your course project proposal. Test your prototype with real users (record and take notes for documentations). Develop a site map and the click-stream based on the outcomes from the test Based in this develop a new paper-prototype using software tools like Balsamiq or Pensil Write a report of max 5 pages including pictures of your paper-prototype, balsamis-prototype, results of the tests, and the improved site map and the clickstream. 28/01/14 ID2216 / 2014 / Tollmar / Devlic 72