Presentation is loading. Please wait.

Presentation is loading. Please wait.

+ Mobile Devices. + Today in Class Hand out Quiz Mobile Device Presentation Wordpress Presentation.

Similar presentations


Presentation on theme: "+ Mobile Devices. + Today in Class Hand out Quiz Mobile Device Presentation Wordpress Presentation."— Presentation transcript:

1 + Mobile Devices

2 + Today in Class Hand out Quiz Mobile Device Presentation Wordpress Presentation

3 + Overview Understanding usability on mobile devices Creating personas for mobile websites Mobile Web vs. Mobile Application Using tools and simulators to test your site on a range of mobile devices

4 + Understanding Usability Mobile usability is dependent on being built for on the go situations commutes, out with friends, or waiting before a meeting. Users resort to their computers for large amounts of reading and research, so mobile websites and applications should be fashioned accordingly Essential that users be able to open the app quickly, accomplish what they hope to accomplish, then exit quickly Mobile Devices

5 + Understanding Usability Organization of mobile web experiences needs to: Align with how people use their mobile devices and why Emphasize content over navigation Provide relevant options for exploration and pivoting Maintain clarity and focus Mobile Devices

6 + Google breakdowns: urgent now, repetitive now, and bored now Mobile User Interaction types: Lookup/Find (urgent info, local) Explore/Play (bored, local) Check In/Status (repeat/micro-tasking) Edit/Create (urgent change/micro-tasking) Align with how people use their mobile devices

7 + Example Flickr photo sharing mobile web experience has four primary actions: Recent activity Uploads from your contacts Todays interesting photos Photos taken nearby

8 + Mobile Devices Content takes precedence over navigation on mobile Emphasize Content over Navigation

9 + Mobile Devices Provide Relevant Options for Exploration and Pivot

10 + Mobile Devices Clear, focused designs to get things done Maintain Clarity and Focus

11 + Usability Usability of mobile phone apps still looms large There are no clear developer guidelines on app usability The diversity among different handset models makes it difficult to define a standard for the usability factor Most (though not all) usability issues arise out of hardware problems Mobile Phone Apps

12 + Hardware Problems Screen Resolution Colors and Contrast Button Functions Font Size Cursors Keyboards Mobile Devices

13 + User Experience on Mobile Prioritize the most important content or features Keep your layout simple Give the option to view the full website Take advantage of mobile specific features Use more text links than images Avoid the use of pop ups and/or automatic refreshes Build mobile-friendly forms Optimize the navigation Minimize the action path If using redirects be sure they work

14 + 3 Mobile Personas Touch Screeners Green Thumbs Straight Talkers

15 + Touch Screeners 18-34 years old; typically Gen Y/Millennials Follow the latest trends Likely have a smartphone Likely to download apps, receive coupons, bank from their phone, scan QR codes, watch videos and research products

16 + Green Thumbs 24-44 years old; typically Gen X and Y and more likely to have small kids Includes new mothers shifting online habits to mobile due to time limitations Likely to access mobile web on a monthly basis, get coupons, enter sweepstakes

17 + Straight Talkers 35-65 years old; Gen Xers and Boomers with teenage kids Spend a majority of free time with family Likely to increase mobile search behavior, transition to mobile coupons, text messages, light online product research

18 + Mobile tactic heat map

19 + Mobile Web vs. Mobile Application consists of browser-based HTML pages that are linked together and accessed over the Internet Designed for the smaller handheld display and touch- screen interface. actual applications that are downloaded and installed on your mobile device Downloaded from Apples App Store, Android Market, or Blackberry App May or may not use internet to download content Mobile WebMobile Application

20 + Principles Mobile Web vs Apps

21 + PrinciplesMobile App (MA)Responsive Web Design (RWD) Access SpeedVery fastFast App StoreAvailableNot necessary Approval ProcessSome are mandatoryNone Content Versions Multiple URLs/versions for each page, i.e., content forking Same content regardless of device or platform Development CostExpensive to very expensiveModerate to reasonable Features Phone features, location services, camera, etc… Limited phone features Functionality Some functions may be omitted from the mobile application All functions of original site remain Internet ConnectionAvailable offlineRequired MonetizationEasily monetizedNot as easy to monetize NavigationInteractive user interfaceStatic but responsive user interface Optimized to mobile deviceBestGood User Access After installation and some user configuration/interaction Through browser with little to no user configuration/interaction

22 + Content Usage User Preference by Task

23 + Time Usage Desktop and Mobile Web vs. Mobile Apps

24 + Advantages - Mobile Web vs. Apps Immediacy – Mobile Websites Are Instantly Available Compatibility – Mobile Websites are Compatible Across Devices Upgradability – Mobile Websites Can Be Updated Instantly Findability – Mobile Websites Can be Found Easily Shareability – Mobile Websites Can be Shared Easily by Publishers, and Between Users Reach - Mobile Websites Have Broader Reach LifeCycle - Mobile Websites Cant be Deleted A Mobile Website Can be an App! Time and Cost - Mobile Websites are Easier and Less Expensive Support and Sustainability

25 + When Does an App Make Sense? Interactivity/Gaming Regular Usage/Personalization Complex Calculations or Reporting Native Functionality or Processing Required No connection required

26 + Tools Web Developer Browser Extension (http://chrispederick.com/work/web-developer/)http://chrispederick.com/work/web-developer/ Mobile Testing

27 + Tools ScreenFly (https://quirktools.com/screenfly/)https://quirktools.com/screenfly/ Responsinator (http://www.responsinator.com/)http://www.responsinator.com/ SDKs Apple: https://developer.apple.com/ipad/sdk/ Android: http://developer.android.com/sdk/index.html Windows: https://dev.windowsphone.com/en-us/downloadsdk Mobile Emulators

28 + jQuery Mobile A unified, HTML5-based user interface system for all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design. Video (lynda.com)lynda.com What is jQuery Mobile? Overview of features Building your first jQuery Mobile app Introduction to jQuery Mobile

29 + jQuery Mobile https://codiqa.com/ Premier prototyping and interface-building tool for jQuery Mobile Lets you rapidly turn your mobile web or native app vision into reality Codiqa

30 + jQuery Mobile http://jquerymobile.com/themeroller/ makes it easy to create custom-designed themes for your mobile site or app. Just pick colors, then share your theme URL, or download the theme and drop it into your site. ThemeRoller

31 + W3C mobileOK Checker Free service by W3C that helps check the level of mobile- friendliness of Web documents, and in particular assert whether a Web document is mobileOK (http://validator.w3.org/mobile/index.html)http://validator.w3.org/mobile/index.html the Mobile Web Best Practices 1.0 specification (http://www.w3.org/TR/mobile-bp/)http://www.w3.org/TR/mobile-bp/ defines the notion of mobile-friendliness what the W3C mobileOK Checker actually tests. when a Web document passes all the tests, it is mobileOK.


Download ppt "+ Mobile Devices. + Today in Class Hand out Quiz Mobile Device Presentation Wordpress Presentation."

Similar presentations


Ads by Google