jquery mobile ux

Click here to load reader

Download jQuery mobile UX

Post on 29-Jun-2015




0 download

Embed Size (px)


  • 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 Cant 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)Basic Page

Testdata-* 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 Mobile device display the page without any zooming Using CSS media queries to support different devicesInbal Geffen 13. ViewportInbal Geffen 14. Lists
  • Acura
  • Audi
  • BMW
  • Cadillac
  • Ferrari
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
State* Please select a state 1 2 3 4
Inbal Geffen 16. Header - navigation barhttp://jquerymobile.com/test/docs/toolbars/docs-headers.html
New Claim
Inbal Geffen