SlideShare una empresa de Scribd logo
1 de 16
Descargar para leer sin conexión
UX & jQuery Mobile




     Inbal Geffen
UX = User Experience

What is the USER'S 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
UX = User Experience

Up to a decade ago...

 ● Products (websites, applications) were built by designers or product
   owners

Now!

 ● There's a new emphasis on what the user will want
 ● This aspect created a new field called UX - which focuses on the user
   experience
 ● It's 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
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 UX




Inbal Geffen
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
   doesn't have to.

 ● We can't measure good UX - traffic, uniques, time..

 ● Measurements can be misleading

 ● Content might beat usability




Inbal Geffen
Research

What 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 research




Inbal Geffen
Wireframes

Pros:

       • Good for defining content

       • Good for documenting screens

Cons:

       • Bad at showing interactivity / flow

       • Can’t really use them for testing

       • Slow. Too much time spent describing.


Inbal Geffen
Describe what the user DOES

So 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 together


For example : Balsamiq (http://www.balsamiq.com/)




Inbal Geffen
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
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
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 elements
3 roles to elements, header, content and footer




Inbal Geffen
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 devices




Inbal Geffen
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
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.html




Inbal Geffen
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
Header - navigation bar

http://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

Más contenido relacionado

Similar a jQuery mobile UX

Mobile html5 today
Mobile html5 todayMobile html5 today
Mobile html5 todayIdo Green
 
Crash Course in AngularJS + Ionic (Deep dive)
Crash Course in AngularJS + Ionic (Deep dive)Crash Course in AngularJS + Ionic (Deep dive)
Crash Course in AngularJS + Ionic (Deep dive)ColdFusionConference
 
Building jQuery Mobile Web Apps
Building jQuery Mobile Web AppsBuilding jQuery Mobile Web Apps
Building jQuery Mobile Web AppsOperation Mobile
 
Ecommerce Mini Project / Group Project Coding
Ecommerce Mini Project / Group Project CodingEcommerce Mini Project / Group Project Coding
Ecommerce Mini Project / Group Project CodingHemant Sarthak
 
UTEP AITP Presentation - 10/17/2012
UTEP AITP Presentation - 10/17/2012UTEP AITP Presentation - 10/17/2012
UTEP AITP Presentation - 10/17/2012impulsedev
 
jQTouch – Mobile Web Apps with HTML, CSS and JavaScript
jQTouch – Mobile Web Apps with HTML, CSS and JavaScriptjQTouch – Mobile Web Apps with HTML, CSS and JavaScript
jQTouch – Mobile Web Apps with HTML, CSS and JavaScriptPhilipp Bosch
 
Building Better Web Apps with Angular.js (SXSW 2014)
Building Better Web Apps with Angular.js (SXSW 2014)Building Better Web Apps with Angular.js (SXSW 2014)
Building Better Web Apps with Angular.js (SXSW 2014)kbekessy
 
How Accessibility Made Me a Better Developer
How Accessibility Made Me a Better DeveloperHow Accessibility Made Me a Better Developer
How Accessibility Made Me a Better DeveloperBilly Gregory
 
Skill Session - Web Multi Device
Skill Session - Web Multi DeviceSkill Session - Web Multi Device
Skill Session - Web Multi Devicefilirom1
 
Responsive web design & mobile web development - a technical and business app...
Responsive web design & mobile web development - a technical and business app...Responsive web design & mobile web development - a technical and business app...
Responsive web design & mobile web development - a technical and business app...Atos_Worldline
 
Max Voloshin - "Organization of frontend development for products with micros...
Max Voloshin - "Organization of frontend development for products with micros...Max Voloshin - "Organization of frontend development for products with micros...
Max Voloshin - "Organization of frontend development for products with micros...IT Event
 
Lean Development: Design Through Iterative Experiments
Lean Development: Design Through Iterative ExperimentsLean Development: Design Through Iterative Experiments
Lean Development: Design Through Iterative ExperimentsSalesforce Developers
 
Accessibility - A feature you can build
Accessibility - A feature you can buildAccessibility - A feature you can build
Accessibility - A feature you can buildMonika Piotrowicz
 
Fake it 'til you make it
Fake it 'til you make itFake it 'til you make it
Fake it 'til you make itJonathan Snook
 
ITB2015 - Crash Course in Ionic + AngularJS
ITB2015 - Crash Course in Ionic + AngularJSITB2015 - Crash Course in Ionic + AngularJS
ITB2015 - Crash Course in Ionic + AngularJSOrtus Solutions, Corp
 
phonegap with angular js for freshers
phonegap with angular js for freshers    phonegap with angular js for freshers
phonegap with angular js for freshers dssprakash
 
Neil Perlin - We're Going Mobile! Great! Are We Ready?
Neil Perlin - We're Going Mobile! Great! Are We Ready?Neil Perlin - We're Going Mobile! Great! Are We Ready?
Neil Perlin - We're Going Mobile! Great! Are We Ready?LavaConConference
 

Similar a jQuery mobile UX (20)

Mobile html5 today
Mobile html5 todayMobile html5 today
Mobile html5 today
 
Crash Course in AngularJS + Ionic (Deep dive)
Crash Course in AngularJS + Ionic (Deep dive)Crash Course in AngularJS + Ionic (Deep dive)
Crash Course in AngularJS + Ionic (Deep dive)
 
Building jQuery Mobile Web Apps
Building jQuery Mobile Web AppsBuilding jQuery Mobile Web Apps
Building jQuery Mobile Web Apps
 
Ecommerce Mini Project / Group Project Coding
Ecommerce Mini Project / Group Project CodingEcommerce Mini Project / Group Project Coding
Ecommerce Mini Project / Group Project Coding
 
UTEP AITP Presentation - 10/17/2012
UTEP AITP Presentation - 10/17/2012UTEP AITP Presentation - 10/17/2012
UTEP AITP Presentation - 10/17/2012
 
Challenges going mobile
Challenges going mobileChallenges going mobile
Challenges going mobile
 
jQTouch – Mobile Web Apps with HTML, CSS and JavaScript
jQTouch – Mobile Web Apps with HTML, CSS and JavaScriptjQTouch – Mobile Web Apps with HTML, CSS and JavaScript
jQTouch – Mobile Web Apps with HTML, CSS and JavaScript
 
Building Better Web Apps with Angular.js (SXSW 2014)
Building Better Web Apps with Angular.js (SXSW 2014)Building Better Web Apps with Angular.js (SXSW 2014)
Building Better Web Apps with Angular.js (SXSW 2014)
 
How Accessibility Made Me a Better Developer
How Accessibility Made Me a Better DeveloperHow Accessibility Made Me a Better Developer
How Accessibility Made Me a Better Developer
 
Skill Session - Web Multi Device
Skill Session - Web Multi DeviceSkill Session - Web Multi Device
Skill Session - Web Multi Device
 
Responsive web design & mobile web development - a technical and business app...
Responsive web design & mobile web development - a technical and business app...Responsive web design & mobile web development - a technical and business app...
Responsive web design & mobile web development - a technical and business app...
 
Max Voloshin - "Organization of frontend development for products with micros...
Max Voloshin - "Organization of frontend development for products with micros...Max Voloshin - "Organization of frontend development for products with micros...
Max Voloshin - "Organization of frontend development for products with micros...
 
Adobe & HTML5
Adobe & HTML5Adobe & HTML5
Adobe & HTML5
 
Lean Development: Design Through Iterative Experiments
Lean Development: Design Through Iterative ExperimentsLean Development: Design Through Iterative Experiments
Lean Development: Design Through Iterative Experiments
 
Accessibility - A feature you can build
Accessibility - A feature you can buildAccessibility - A feature you can build
Accessibility - A feature you can build
 
Fake it 'til you make it
Fake it 'til you make itFake it 'til you make it
Fake it 'til you make it
 
ITB2015 - Crash Course in Ionic + AngularJS
ITB2015 - Crash Course in Ionic + AngularJSITB2015 - Crash Course in Ionic + AngularJS
ITB2015 - Crash Course in Ionic + AngularJS
 
phonegap with angular js for freshers
phonegap with angular js for freshers    phonegap with angular js for freshers
phonegap with angular js for freshers
 
Going web native
Going web nativeGoing web native
Going web native
 
Neil Perlin - We're Going Mobile! Great! Are We Ready?
Neil Perlin - We're Going Mobile! Great! Are We Ready?Neil Perlin - We're Going Mobile! Great! Are We Ready?
Neil Perlin - We're Going Mobile! Great! Are We Ready?
 

jQuery mobile UX

  • 1. UX & jQuery Mobile Inbal Geffen
  • 2. UX = User Experience What is the USER'S 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 Experience Up to a decade ago... ● Products (websites, applications) were built by designers or product owners Now! ● There's a new emphasis on what the user will want ● This aspect created a new field called UX - which focuses on the user experience ● It's 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 UX Inbal 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 doesn't have to. ● We can't measure good UX - traffic, uniques, time.. ● Measurements can be misleading ● Content might beat usability Inbal Geffen
  • 6. Research What 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 research Inbal Geffen
  • 7. Wireframes Pros: • Good for defining content • Good for documenting screens Cons: • 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 DOES So 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 together For 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 elements 3 roles to elements, header, content and footer Inbal 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 devices Inbal 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.html Inbal 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 http://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