Building great apps for mobile devices: tips and tricks

Transcription

1 Building great apps for mobile devices: tips and tricks

2 Presenters David Cardella Will Nick Black Steve

3 Agenda Intro Our favorite apps... App design patterns for location based experience Design and development process

4 Our Favorite Apps

5 Slack

6 Slack Why is this a great app? Truly instant messaging and more Familiarity Aesthetic Touches Keeps me up to date Ubiquitous and full featured

7 Slack Why is this a great app?

8 MindNode

9 What makes MindNode so great?

10 MindNode Well built and well designed has never crashed on me Organized and stored Seamlessly platform friendly Freedom when I need it, constraints when I expect it

11 Location based experience #LBX

12 What is a good UI/UX for a location based app? Who are you building your app for? GIS analysts - tools, tools tools on a toolbar Knowledge workers - minimum tool set to get the job done Consumers - just what they need and make it look good Where are your users using it? Office based - wifi, indoors Outdoors - offline, glare, gloves? Whatever you do, dont make it slow or annoying! Efficient tooling, fast screen loads, fast lists, fast maps! Make alerts appropriate for usage

13 Before you start cranking code... Ask yourself some questions... What sort of location based app are you building? Location Based Experience (#LBX) What value does location have to the user? How will the user interact with location? How does the app consume location? What are the patterns i can learn from?

14 Map-centric apps Its all about the map Get to the map quickly Care about cartography (as always) legend should be last resort Save the state of the map last used, extent, active tools etc... Full screen map on mobile, side panel on tablet? Provide tools in appropriate ways Use gestures, default tap action, Offline maps? a) Take data offline from an online map b) Pre-prepare offline data ready for app startup Will users be able to pre-plan?

15 Map-as-navigation apps The map is an app navigation tool Map is just part of the apps screen flow has little value on its own e.g. sketch graphic for use in spatial query on a layer Focused toolset Simple, no distractions Default actions only? Simple cartography Intuitive, no distractions Consider the use popups to show information

16 Maps-as-context apps Map is an auxiliary view that MAY add information Embedded in other information Map is driven by other content Content and filters auto-populated Few or no tools Rebuild views on orientation change events

17 Location-as-search apps Use location to drive a list of items Current location provides basis for a search from data/service Retrieve location from the device location manager One time request Sorting of the list? Nearest, largest etc Add spatial information to the list Distance, route time, size, pictures etc...

18 Location-as-alerts apps Use location to alert the user about proximity Builds on location-as-search apps Current location provides basis for a search from data/service Retrieve location from the device location manager What is your strategy? Be kind on the battery What is your tolerance? Provide alerts using background service & system notifications Work offline typically yes - needs to work wherever! Test for proximity layer query Geometry engine

19 Development Process

20 Our Process Design & Development Approach and Techniques Getting to Production

21 Cross Platform Development Consistent user experience and branding across platforms while making the app feel like it is designed for its platform.

22 Overview Ship! Understand Design Develop Diverge Document Refine Decide Prototype Polish

23 Starting Out Research Personas Assemble Scenarios Analyse Assumptions

24 Challenges Discussing design

25 Challenges Discussing design Differing Opinions are Great! Provide Structure Involve your Team joyintermedia.com

26 Design Studio Discussing design GENERATE IDEAS CRITIQUE Strengths Areas for Improvement Questions Sketching Rules Creative thinking Independently ITERATE

27 Design Studio Discussing design Prototype Design Studio Detailed Designs Basic high-level wireframes

28 Prototyping: Learn early, Learn often Fidelity Tools Code Documentation

29 Design reviews and feedback

30 Gather both necessary and diverse sources of feedback

31 Gather both necessary and diverse sources of feedback

32 Gather both necessary and diverse sources of feedback Sanity check with other designers

33 Gather both necessary and diverse sources of feedback Sanity check with other designers Get developer feedback

34 Gather both necessary and diverse sources of feedback Sanity check with other designers Get developer feedback Get stakeholder feedback

35 Gather both necessary and diverse sources of feedback Sanity check with other designers Get developer feedback Get stakeholder feedback Observe users in action

36 Iterate, finalize, implement, QA

37 Your first solution might not be your best solution

38 Every design should have an owner

39 Send to Dev

40 Test. Test. Test.

41 Test some more

42 Keep visual design ahead of the curve

43 What is visual design?

44 Consider it from the start

45 Consider it from the start You are not coloring in b+w wireframes

46 Consider it from the start You are not coloring in b+w wireframes UX and UI have a lot of overlap

47

48

49 Visual Design Pass and Implementation

50 Review with UX designers

51 Review with UX designers Review with Developers

52 Review with UX designers Review with Developers Have patience

53 Ship it

54 App Store Optimization (ASO)

55 What makes your app so special?

56 What makes your app so special? Keep it simple

57 What makes your app so special? Keep it simple Make it fun

58 What makes your app so special? Keep it simple Make it fun Use the screenshot slots! Follow the OS guidelines from the start

59 Thanks