Your SlideShare is downloading. ×
jQuery mobile UX
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. UX & jQuery Mobile Inbal Geffen
  • 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. 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. 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. 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. 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 : ● Logical behavior ● Create wireframes according to researchInbal Geffen
  • 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. 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 ( Geffen
  • 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. 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. Setting up our page (basic page template)<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Basic Page</title> <link rel="stylesheet" href=""> <script src=""></script> <script src=""></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. 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. 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. 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: Geffen
  • 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. Header - navigation bar<div data-role="header" id="hdrMain" name="hdrMain" data-nobackbtn="true"> <h1>New Claim</h1></div> Inbal Geffen