Nokia Mobile HTML5 Framework. UX introduction to creating location-based mobile apps

Transcription

1 Nokia Mobile HTML5 Framework UX introduction to creating location-based mobile apps 22

2 Main components you can use and customize to meet your needs Interactive map Search Place details Routing 22 Nokia Mobile HTML5 Framework UX guidelines for our mobile location based API Page 2

3 Core values Four great reasons to work with our API Simple Rich Customizable Submit ready Integrate with ready-built compo- Use UI components for Maps, Customize our components with the Wrap your app in web view for nents using only a few lines of code. Places, Search, Route, Favorites,... look and feel thats right for you. access to native features. Integrate YUI, jquery Mobile, Sen- Built in HTML5 and optimized for Design and integrate components Then you can put your app in an cha and many other JS FWs. mobile and tablet. that suit your branding best. app store or marketplace. 22 Nokia Mobile HTML5 Framework UX guidelines for our mobile location based API Page 3

4 Responsive web design for cross-platform and cross-device development Mobile Tablet Supported platforms Now: ios 4.x, ios 5.0 Android 2.2, 2.3, 3.1, 3.2 (4.0) Meego Blackberry Touch devices OS6, OS7 (experimental) Coming H2 22: Symbian Windows Phone 8.0 WebOS Nokia Mobile HTML5 Framework UX guidelines for our mobile location based API Page 4

5 And more out of the box Take advantage of included features Chrome hiding Smooth transitions Back history behavior Reverse/Geocoding m.maps.nokia.com 22 Nokia Mobile HTML5 Framework UX guidelines for our mobile location based API Page 5

6 Detail: components The following slides explain each component s functionality and customizable elements. Map Search Place details + sharing Routing 22 Nokia Mobile HTML5 Framework UX guidelines for our mobile location based API Page 6

7 Map component The map component contains a fully interactive map with pinch zoom (or additional zoom buttons), clickable places of interest (POIs) and long press info buttons for every street area. In additon there are options to show the user s position on the map and different map schemes to choose from. Elements in this component Map with different map schemes Places of interest Marker Info bubble (customisable) 05 Map position button and user s position on map 06 Map settings button 07 Optional zoom control, when pinch zoom is not available search component map views custom colors custom elements page 08 page 15 page 16 page Nokia Mobile HTML5 Framework UX guidelines for our mobile location based API Page 7

8 Search component You can use our place database which contains millions of items and provides address and location search. Or you can insert your own search back end and take advantage of our UX features, such as search history. Elements in this component Search bar with placeholder text Search history and search suggestions search result views custom colors page 09 page Nokia Mobile HTML5 Framework UX guidelines for our mobile location based API Page 8

9 Search component result views Search results on the map show where places are located. Linking the map and the search results is very easy to do. Clicking on a search result pin opens an info bubble that contains the place name. Clicking the info bubble links to place details. On mobile, there are two results views map and list. On a tablet, the map and list view are combined to give more information at once. Elements in this component Search results on map* > mobile Search result list > mobile Search result pin Search result combined view (map* & list) > tablet * part of map component responsive web design map views custom colors custom elements page page 15 page 16 page Nokia Mobile HTML5 Framework UX guidelines for our mobile location based API Page 9

10 Place details component top 05 The place details component contains rich information on the places in our database. The Minimap on top shows the place and what s in its vicinity. Next to the basic place information - such as address, owner information and images - there is an interactive bar that offers multiple place interactions. Elements in this component Contact card Place actions: Call / Share / Route / Web Images Owner information Elements of other components 05 Map with different map schemes place details bottom custom colors custom elements embedding page 11 page 16 page 17 page Nokia Mobile HTML5 Framework UX guidelines for our mobile location based API Page 10

11 Place details component bottom To add more content to place detail pages, multiple reviews and guides are available from well known services such as qype, trip advisor and WCities. The Nearby section shows a list of places in the vicinity and provides incentive to explore further. Elements in this component Guides section Reviews section Nearby section Legal note place details top custom colors custom elements embedding page 10 page 16 page 17 page Nokia Mobile HTML5 Framework UX guidelines for our mobile location based API Page 11

12 Share a place (coming soon) Users can share the places they find with others using the most popular social networking services. Integration with mail or SMS is included, and social network services can be added or removed. Elements in this component Information about the place to be shared Different sharing services place details top page Nokia Mobile HTML5 Framework UX guidelines for our mobile location based API Page 12

13 Routing component Users can navigate from their current location (or anywhere else) to the places they found from searching or while browsing place details. Routes are available for walk, drive or public transport and can be viewed on a map or in a list. Elements in this component Start and destination form 05 Change method of travel Elements of other components Map / list toggle Map with Route on map, start and end point 05 List with instructions place details top custom colors custom elements embedding page 10 page 16 page 17 page Nokia Mobile HTML5 Framework UX guidelines for our mobile location based API Page 13

14 Detail: customizations Customize further with different map schemes, custom elements and custom colors and embed your app into your website or mobile application. 22 Nokia Mobile HTML5 Framework UX guidelines for our mobile location based API Page 14

15 Map schemes Map Satellite Public transport Live traffic There are a lot of different map schemes to choose from: map, satellite, public transport, live traffic, grey, terrain, hybrid and more to come. Adding optional map settings functionality enables users to change between those map schemes. Additonal: Map settings In this screen the user can change the map scheme and the measurement units for distances Nokia Mobile HTML5 Framework UX guidelines for our mobile location based API Page 15

16 Custom colors There are two color sets available, one for bright and one for dark backgrounds (bg). Each set contains two color slots for a primary and a secondary color. In addition, you can change the color of the header bar as well as the text input background color. Color slots bright background dark background secondary primary primary secondary header text input bg all backgrounds 22 Nokia Mobile HTML5 Framework UX guidelines for our mobile location based API Page 16

17 Custom elements Almost every icon color and element shape can easily be changed to suit your needs. Just open the file full of customizable icons and shapes and change them to your liking. icons: change colors shapes: change everything 22 Nokia Mobile HTML5 Framework UX guidelines for our mobile location based API Page 17

18 Embedding GIG-Finder When you re done creating and customizing, you re ready to embed the components into your website or mobile application. This embeddable version integrates easily and seamlessly with your existing components. Embedding example Custom header Customized components and content 22 Nokia Mobile HTML5 Framework UX guidelines for our mobile location based API Page 18

19 So, ready to build your own mobile HMTL5, cross platform location based apps? Just drop me a line at bernd.mrohs@nokia.com 22 Nokia Mobile HTML5 Framework UX guidelines for our mobile location based API Page 19