Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Design talk on Mobile web app concept design

1,923 views

Published on

This design talk aimed at giving the audience a quick start into mobile app concepting\conceptual design for Code fest.

Published in: Design, Technology
  • Be the first to comment

Design talk on Mobile web app concept design

  1. 1. Nokia Internal Use OnlyNokia Internal Use Only 1 Tech Design talk on Mobile App Conceptual Design Nokia Life {Code Fest}
  2. 2. Nokia Internal Use Only For designing a concept You need to… Have an idea for an app: - Define your app – - If you cannot explain the basic value of your idea in one sentence, it’s too complex. Example GOJEE - Hand picked recipes personalized for the user. KINDLE CLOUD READER - Read your Kindle books, instantly. - Focus on one main use case - Concentrate on a few key features - What are it’s business objective - e.g., OVI Store: Provide an easy means of distribution & built In payment mechanism. Bring efficient expansion of product lines into new market 2 Source: http://blog.flurry.com/default.aspx?Tag=Usage%20Statistics
  3. 3. Nokia Internal Use Only Know your target audience - Accountants or 18 year old college student? - Cover information like demography, Age, gender, motivations to complete a task etc. to understand your users. - User goals – The business motivations in the example are tightly linked with the user behavior. E.g., Communicate with friends and family using social networks while on the go. 3 For designing a concept You need to…
  4. 4. Nokia Internal Use Only Think of scenarios and context of use Once personas are defined, the characters need to be placed in relevant, true-to-life, “mobile” circumstances. - Try to use native features of the phone to good effect like Geo-location, Camera, making a call or SMS. - Design for partial attention and interruptions. Mobile contexts Bored: There are a lot of people using their smartphones on the couch at home. In this context, immersive and delightful experiences geared toward a longer usage session are a great fit. Still, interruptions are highly likely so be sure your app can pick up where your user left off. Examples: Facebook, Twitter, Angry Birds, web browser. Busy: This is the 'running though the airport' scenario. The ability to accomplish micro-tasks quickly and reliably with one hand in a hectic environment is critical. Remember that the user will have tunnel vision in this context, so huge targets and bold design are important. Examples: TripIt, email, calendar, banking. Lost: Users who are in transit, in unfamiliar surroundings, or in familiar surroundings but interested in something unknown around fall into the lost category. In this context, sketchy connectivity and battery life are big concerns, so you should offer some level of offline support and be sparing with your use of geo- location and other battery hogs. Typical examples: Maps, Yelp, Foursquare. 4 For designing a concept You need to…
  5. 5. Nokia Internal Use Only Navigation maps (or Information Architecture diagrams) IA for mobile are critical to design. To design a flow that’s intuitive, understanding the relationship of content to other content provides a way to design simple and usable controls. - The information architecture should be shallow and not deep. 5 For designing a concept You need to…
  6. 6. Nokia Internal Use OnlyNokia Internal Use Only Video 6 Conceptual design Source: http://developer.nokia.com/gen/videos_all.xhtml?id=e137d 96b-3138-430a-a114- f2afbc301473/Conceptual_Design_in_2_Minutes_Video
  7. 7. Nokia Internal Use OnlyNokia Internal Use Only Sketching…Don’t be afraid…it’s fun! Video 7 Key take away points - Anyone can sketch, it can be simple - Communicate ideas - Explore the unknowns - Works as decision making aid - Gather feedback - Quick and cheap to iterate Tip: PresentShare sketches with different group of people to get different perspective and Iterate if necessary. Conceptual design
  8. 8. Nokia Internal Use OnlyNokia Internal Use Only 8 You can print this template and sketch over it like shown in the example: http://media.smashingmagazine.com/wp-content/uploads/2012/03/3-up-mobile-v2.pdf Template to sketch Tip: You can create Paper-in-screen prototype by digitizing the sketches.
  9. 9. Nokia Internal Use OnlyNokia Internal Use Only 9 Springboard (Hub and Spoke) When to use: You are designing a UI that contains several discrete tasks or content elements: forms, demos, games, articles, transactions, entire applications, etc. All are reachable from one central page or window. But you don't want to link all the sections or "spokes" to every other one, for several possible reasons: Primary Navigation patterns
  10. 10. Nokia Internal Use OnlyNokia Internal Use Only 10 List menu When to use: When you have long titles or 2 line text with subtext to be displayed. Give users an option to come back from any internal page by using a button in the title bar with a list icon or the word “menu” Primary Navigation patterns
  11. 11. Nokia Internal Use OnlyNokia Internal Use Only 11 Tabs When to use: You don’t mind users getting distracted or discontinue from the current task and jump to other tab. Hub and Spoke brings focus to each task as Spokes are not linked or available as global navigation. When you need to provide a persistent global navigation and access to other sections. Primary Navigation patterns
  12. 12. Nokia Internal Use OnlyNokia Internal Use Only 12 Primary Navigation patterns Galleries When to use: Works best for frequently updated content that people want to browse.
  13. 13. Nokia Internal Use OnlyNokia Internal Use Only 13 Dashboard When to use: Where key metrics are to be included, like budget tool. Do not overload the dashboard; conduct research to determine the key metrics to be shown in a dashboard Primary Navigation patterns
  14. 14. Nokia Internal Use OnlyNokia Internal Use Only 14 Metaphor When to use: Where you have an opportunity to bring the real world elements as metaphor into our apps. Use this pattern judiciously Primary Navigation patterns
  15. 15. Nokia Internal Use OnlyNokia Internal Use Only 15 Mega Menu When to use: Determine your information architecture before choosing the navigation pattern. Choose a more appropriate pattern, like Tabs, if there are only few major sections in the app. Primary Navigation patterns
  16. 16. Nokia Internal Use OnlyNokia Internal Use Only 16 Mobile Design Pattern Gallery http://www.mobiledesignpatterngallery.com/mobile-patterns.php?colid=65438029-72157627607680275 https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/UX/Patterns More patterns Page carousel Image carousel Expanding list
  17. 17. Nokia Internal Use OnlyNokia Internal Use Only 17 The aesthetics of your application will directly affect how easily people are able to accomplish their goals with your application without sacrificing usability. Design Principles from Mozilla Aim for a pleasant first launch experience People often spend only a minute or two deciding whether to continue or abandon an app. Some of the factors you may want to consider include: • provide a quick introduction to your app (and provide an easy way to end it anytime) • instant access to features and suggestions • minimize initial user input • express the most important information in a concise way Be consistent • Make interface elements meaningful. If it’s a button, make it look like one. Be concise and use appropriate language • Speak user’s language, avoid using technical jargons which our users wont understand. Provide clear, easy to understand labels on all controls so it’s easy to know what they do Always provide clues and immediate feedback • Design for easy exploration, without harsh penalties. • Give help when needed, but not before. And don’t make users search for it. Minimize typing • Give selection options wherever necessary, like radio button, checkboxes, list etc. Present action choices if possible • Let the user be in control; give directions and feedback Focus on the main task • Decide the main task of each screen and place features related to the main task in the most prominent places.
  18. 18. Nokia Internal Use OnlyNokia Internal Use Only 18 Further readings HTML 5: http://mobiforge.com/developing/story/using- html5-application-cache-mobile-web-apps http://www.html5rocks.com/webappfieldguide/ toc/index/ App design: http://mobile.smashingmagazine.com/2012/11 /07/succeed-with-your-app/ Online design tool like Photoshop: http://pixlr.com/editor/ Thank you! Be Creative! Asim Shaikh mails4asim@gmail.com

×