Webinar: Mobile UX: Doing It The Right Way
•
4 j'aime•1,410 vues
Mobile exceeds desktop web usage! This was one landmark change which was documented in early 2014. Now, a year later, businesses are still trying to come to the grips with this tectonic plate-shifting change. According to Goldman Sachs, mobile commerce sales would hit $626 billion by 2018, and according to Forrester Research, 54% of the total e-commerce sales would be done on a mobile device in the next three years. The ubiquitousness of the mobile devices accompanied by the ever improving infrastructure (speed, connectivity, etc) are the catalysts for this growth. But just as every coin has two sides, mobile poses a great challenge for many businesses which they are yet to tame. One of the most common mistakes firms do, is to presume that users would be navigating through your app, or mobile site in the same manner as they do with a desktop. Simply having an app or a mobile web site should not be your Mobile First Strategy. Providing a good mobile user experience (UX) is indispensable in today’s business environment. Thank you, for joining us for the webinar on “Mobile UX: Doing it the right way” on Wednesday, February 11, 2015. In this webinar attendees got insights on the various practices, processes and design strategies to create and deliver a rich mobile UX. THE WEBINAR KEY TAKEAWAYS : 1- Designing an optimal, intuitive and rich UX with improved collaboration and consultative approach 2- Insights on user centric design strategies for mobile 3- Mitigate common challenges in app design and development 4- Enhance your mobile experience with the right balance between standards and creatives
Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (20)
En vedette
En vedette (11)
Similaire à Webinar: Mobile UX: Doing It The Right Way
Similaire à Webinar: Mobile UX: Doing It The Right Way (20)
Plus de Harbinger Systems - HRTech Builder of Choice
Plus de Harbinger Systems - HRTech Builder of Choice (20)
Dernier
Dernier (20)
Webinar: Mobile UX: Doing It The Right Way
- 1. Welcome to the Webinar Mobile UX: Doing It The Right Way by Harbinger Systems © Harbinger Systems | www.harbinger-systems.com
- 2. Panelists © Harbinger Systems | www.harbinger-systems.com Ritesh Thakkar Sr. UX Designer Harbinger Systems Smita Mohith K Lead UX Harbinger Systems Marketing Executive Harbinger Systems Sushant Saraswat
- 3. Agenda • Contributors in User Experience • UCD (User Centric Design) difference on Web and Mobile • Mobile UX Considerations • Mitigate common challenges in App Design and Development • Rich User Experience • Q&A © Harbinger Systems | www.harbinger-systems.com
- 4. Contributors in User Experience © Harbinger Systems | www.harbinger-systems.com
- 5. Contributors in User Experience © Harbinger Systems | www.harbinger-systems.com UX Designer UI Designer DeveloperStakeholder UX
- 6. UX Designer © Harbinger Systems | www.harbinger-systems.com Consulting Stakeholder Conceptualization keeping mobile usage in mind Defining Gestures and interactions Validation with Users Competition/market study Defining UX strategy
- 7. Stakeholder © Harbinger Systems | www.harbinger-systems.com Clear concept & requirements articulation Periodic review Selecting correct approach
- 8. Visual (or UI) Designer © Harbinger Systems | www.harbinger-systems.com Checking visual designs on devices Mobile real-estate consideration Tappable area and spacing between it Providing artifacts specific to device OS standards
- 9. Developer © Harbinger Systems | www.harbinger-systems.com Thinking beyond code Foresee feasibility R&D based on latest styles and trends
- 10. UCD (User Centric Design) strategies for mobile © Harbinger Systems | www.harbinger-systems.com
- 11. • On Web – Even for the minimum resolution, plenty of real estate is available • On Mobile – For mobile it is necessary to start with smaller screen size Why UCD different on Web and Mobile
- 12. • On Web Visual hierarchy & appropriate placement to guide user’s attention • On Mobile Tappable/target area, actionable near the thumb, motor load UCD difference Source: uxmovement.com
- 13. • Web - Architecture is defined based on task priority. Visual hierarchy and color usage to guide user’s attention. • Mobile - Architecture is defined based on usage scenario. Primary tasks upfront and funnel down to the secondary tasks. © Harbinger Systems | www.harbinger-systems.com UCD difference
- 14. • On Web – Detailed Navigation • On Mobile – Simplified Navigation © Harbinger Systems | www.harbinger-systems.com UCD difference Source: templatemonster.com Source www.templatemonster.com
- 15. Mobile UX Consideration in Scenarios © Harbinger Systems | www.harbinger-systems.com • Web - Situational/Environmental consideration is secondary, mostly inside the door. • Mobile - Situational/Environmental parameters are primary focus. This affects most of the elements on the interface.
- 16. Mobile UX Consideration in Task-flow © Harbinger Systems | www.harbinger-systems.com Home Page Category Article Related Article (Target) Home Page (Instant Search) Search Results Article (Target)
- 17. Mobile UX Consideration in Wireframes © Harbinger Systems | www.harbinger-systems.com Consider Gestures Orientation Change Operating systems constraints
- 18. Mobile UX Consideration in Visual design © Harbinger Systems | www.harbinger-systems.com Device Anatomy Device Resolutions Touch /Tappable area
- 19. Mitigate Common Challenges © Harbinger Systems | www.harbinger-systems.com
- 20. Mitigate Common Challenges Challenge - Break Journey of Gestures from Wireframes to visual design How to mitigate • Clear gestures definition in the wireframes. Along with annotations. • All Wireframes on cloud at one place with all review comments © Harbinger Systems | www.harbinger-systems.com
- 21. Mitigate Common Challenges Challenge - Losing on Interaction and Animation defined in visual design when transferred to development • Give the reference sites and app to developers while sharing the animation idea • Use of simulator tool for walkthrough. Pop app gives you gestures and transition effect experience. © Harbinger Systems | www.harbinger-systems.com
- 22. Mitigate Common Challenges • User experience defined wireframes and visual design getting implemented partially/differently • Feasibility issue comes in to picture at later stages • Gaps in Wireframe, Visuals and Functional App © Harbinger Systems | www.harbinger-systems.com How to mitigate these problems? Wireframe Visual Design Live App Collaboration
- 23. Collaboration is Required • But When at different stages of process • For What bridging the gap between all roles • How meeting, walkthroughs, annotating and taking balance decision © Harbinger Systems | www.harbinger-systems.com
- 24. Brief Process Stages Persona Scenario Task flow Wireframes Visual design Usability Study Development © Harbinger Systems | www.harbinger-systems.com StakeholderUX Designer UX Designer UI Designer UX Designer Developer UI Designer UI Designer Developer UI Designer, Stakeholder and Developer UX Designer UI Designer UX Designer
- 25. Rich User Experience Parameters • We have seen contributors in User experience • UX consideration on mobile/touch devices • Challenges and mitigation to it Now We will talk about Rich User Experience and its parameters © Harbinger Systems | www.harbinger-systems.com
- 26. Rich User Experience © Harbinger Systems | www.harbinger-systems.com Rich User Experience also comes with Interaction Gestures Animations and inbuilt functionality (Camera, Maps, Social)
- 27. Examples of Interactions © Harbinger Systems | www.harbinger-systems.com
- 28. Examples of Gestures © Harbinger Systems | www.harbinger-systems.com
- 29. Examples of Animations © Harbinger Systems | www.harbinger-systems.com
- 30. Examples of Inbuilt Features © Harbinger Systems | www.harbinger-systems.com
- 31. Summary © Harbinger Systems | www.harbinger-systems.com User Experience contributors UCD approach for mobile Rich User Experience Collaboration between contributors
- 32. Special Offer © Harbinger Systems | www.harbinger-systems.com One hour of free consultation for mobile UX by Harbinger for all the attendees today Write to us at hsplinfo@harbingergroup.com to avail this exciting opportunity.
- 33. Q&A © Harbinger Systems | www.harbinger-systems.com
- 34. Special Offer © Harbinger Systems | www.harbinger-systems.com One hour of free consultation for mobile UX by Harbinger for all the attendees today Write to us at hsplinfo@harbingergroup.com to avail this exciting opportunity.
- 35. Thank You! Visit us at: www.harbinger-systems.com Write to us at: hsplinfo@harbingergroup.com Blog: blog.harbinger-systems.com Twitter: twitter.com/HarbingerSys (@HarbingerSys) Slideshare: slideshare.net/hsplmkting Facebook: facebook.com/harbingersys LinkedIn: linkedin.com/company/382306 © Harbinger Systems | www.harbinger-systems.com
Notes de l'éditeur
- Web – As the real estate is available in plenty for web, the architecture is defined based on task priority that they expect it from the user. Based on task, hierarchy is so arranged that user focuses on the task priority wise. For the visual arrest, certain elements are graphically highlighted as shown in the image. Mobile – Whereas the architecture for the mobile is scenario based. Due to unavailability of the real estate, most important tasks are filtered and shown upfront. As shown in the screenshot, main tasks are displayed upfront and secondary tasks are lined up in the burger menu. This lessens the memory load on the user by displaying the tasks at his/ her initial focus.
- Web – Navigation is task based and in detailed. First level navigation can be shown upfront completely. Mobile – Whereas for mobile, navigation gets prioritized. As shown in the image, all the options are categorized and are placed under single menu.
- Web – Demographics is secondary factor for web, which can impact the scenarios but not up to a great extent. Mobile – Demographics is considered as an important factor for mobile which can influence the scenarios. (Context/ surroundings/ hardware/ software capabilities)
- Web – Task flow is can be more detailed, with user having options to complete the task with some customized options. Mobile – Task flow is precise and is intended to get completed in fewer steps.
- Gestures – People are becoming familiar with touch gestures like -swiping, dragging, pinching, etc. These gestures should be considered for interactions. Orientation Change – Wireframes for orientation change i.e. portrait to landscape and vice-versa should be considered for content resizing, switching and display. Layout for all types – Button sizes and clickable area should be considered for all types of fingers and layouts. Devices Compatibility – Compatibility for interactions, content, tasks should be considered for various devices and platforms.
- 3rd image not available