jQuery mobile UX
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

jQuery mobile UX

  • 781 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

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

Actions

Shares
Downloads
2
Comments
0
Likes
0

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

Transcript

  • 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 : http://www.jqmgallery.com/ ● 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 (http://www.balsamiq.com/)Inbal 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="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. 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:http://jquerymobile.com/demos/1.0.1/docs/lists/docs-lists.htmlInbal 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 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