jQuery mobile UX


Published on

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

jQuery mobile UX

  1. 1. UX & jQuery Mobile Inbal Geffen
  2. 2. UX = User ExperienceWhat is the USERS experience?! ● Can I find the info I need? ○ Websites and apps become complex and "heavy" with knowledge ○ Is the info included? ○ Can I reach it easily? ○ Will a "simple" user know how to find what he needs? ● Is it easy to work with? ○ Are the buttons big enough? ○ Are the text clear enough? ○ Are my titles clear?Inbal Geffen
  3. 3. UX = User ExperienceUp to a decade ago... ● Products (websites, applications) were built by designers or product ownersNow! ● Theres a new emphasis on what the user will want ● This aspect created a new field called UX - which focuses on the user experience ● Its not all about "UI design" ● We are creating a product for the users (not the clients...)The ones who decide if the product is good or not are :The USERS!!!Inbal Geffen
  4. 4. Problems ● Clients ○ Visions ○ Un-flexible ○ Think they are the users! ● Money ○ UI designer, developers and other experts are required ○ Not all companies or clients can afford another expert (UX expert) ● Startups ○ Visions, trying to "innovate", sometimes hurts UXInbal Geffen
  5. 5. Solution? ● Users are expected - see what works for other apps! ● Expect the unexpected - not all users are the same! ● Different products - If it works for restaurants, it can work for bars doesnt have to. ● We cant measure good UX - traffic, uniques, time.. ● Measurements can be misleading ● Content might beat usabilityInbal Geffen
  6. 6. ResearchWhat UX experts provide is mostly research : ● Existing similar products ● Know your users - check existing similar markets (users) ● Existing similar views (pages or processes in our product) Inspiration : http://www.jqmgallery.com/ ● Logical behavior ● Create wireframes according to researchInbal Geffen
  7. 7. WireframesPros: • Good for defining content • Good for documenting screensCons: • Bad at showing interactivity / flow • Can’t really use them for testing • Slow. Too much time spent describing.Inbal Geffen
  8. 8. Describe what the user DOESSo how do we describe what users do?Visualise the experience...• Show every step to complete a task• Show every click• Preview the experience - see and feel how everything flows togetherFor example : Balsamiq (http://www.balsamiq.com/)Inbal Geffen
  9. 9. Rapid Prototyping• Fast!!• User-centered design methodology• For designing, communicating and evaluating user interfaces• Getting feedback as early as possible• The more cycles the better -release early, release often!Inbal Geffen
  10. 10. jQuery Mobile (Yes, another jQuery!) ● Based on jQuery and jQuery UI foundation ● Touch optimised ● "Light" ● Cross platform compatibility ● Can imitate native look (& feel) ● Contains UI features we use in native apps ● Simple coding for fast results!Inbal Geffen
  11. 11. Setting up our page (basic page template)<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Basic Page</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css"> <script src="http://code.jquery.com/jquery-1.6.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script></head><body><div data-role="page"> <header data-role="header"> <h1>Test</h1> </header> <div data-role="content"> </div></body></html>data-* attribute to assign roles to elements3 roles to elements, header, content and footerInbal Geffen
  12. 12. Viewport ● Viewport meta tag ● Modify the "virtual viewport" of the mobile device ● Default is zoom out so its entire contents are visible<meta name="viewport" content="width=device-width"> ● Mobile device display the page without any zooming ● Using CSS media queries to support different devicesInbal Geffen
  13. 13. Viewport<!-- viewport --><meta name="viewport" content="width=device-width"><!-- iOS stuff --><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="white"><!-- Mobile IE allows us to activate ClearType technology for smoothing fonts for easy reading --><meta http-equiv="cleartype" content="on"><!-- For mobile browsers that do not recognize the viewport tag --><meta name="MobileOptimized" content="320" />Inbal Geffen
  14. 14. Lists<ul data-role="listview" data-inset="true"> <li><a href="#">Acura</a></li> <li><a href="#">Audi</a></li> <li><a href="#">BMW</a></li> <li><a href="#">Cadillac</a></li> <li><a href="#">Ferrari</a></li></ul>More info on lists:http://jquerymobile.com/demos/1.0.1/docs/lists/docs-lists.htmlInbal Geffen
  15. 15. Forms ● We use regular HTML code ● We need to remember to use the data-role field<form id="form1"> <div id="fnameDiv" data-role="fieldcontain"> <label for="fname" id="fnameLabel" name="fnameLabel">Name*</label> <input id="fname" name="fname_r" type="text" /> </div> <div id="stateDiv" data-role="fieldcontain"> <label id="stateLabel" for="state">State*</label> <select id="state" name="state_r" tabindex="2"> <option value="0">Please select a state</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> </div>Inbal Geffen
  16. 16. Header - navigation barhttp://jquerymobile.com/test/docs/toolbars/docs-headers.html<div data-role="header" id="hdrMain" name="hdrMain" data-nobackbtn="true"> <h1>New Claim</h1></div> Inbal Geffen