1. Home
  2. Lainnya

A Mobile-Optimized Mapping UI

A Mobile-Optimized Mapping UI

In this next section, we will work through the process of creating a UI for mapping that is optimized for a mobile device. All the building blocks that we require are supplied in the Google Maps toolbox. It’s just a case of being a little more selective with what we use than we might ordinarily be with a desktop application.

A Mapping UI Mockup

Before we get into the code for our mobile mapping UI, we will begin by putting together

a UI mockup, as we did for our to-do list application in Chapter 4. This is displayed in Figure 8–8.

CHAPTER 8: Location-Based Services and Mobile Mapping

Figure 8–8. A mockup of our optimized UI for mobile mapping There are six primary components to the interface:

1. The application title bar. We have gone back to the simple title style for this application as it is better suited to work with a full-screen map, and we really don’t want to waste pixels with such limited screen real estate.

2. The currently selected marker title. This bar is displayed when a marker is tapped, and shows the title of the tapped marker. The active marker is shown in element

4. Depending on the application, tapping the actual marker title could be used to take the user to a detailed information page for the selected marker. In this case, the title should probably be underlined to indicate that it is also a link.

3. Marker change selection navigation controls. These navigation controls are included to provide an alternative mechanism for navigating through the markers. Instead of having to tap individual markers, the navigation controls can be used to move through the markers and change the active marker selection.

4. The active marker. This is the marker that was most recently tapped or that has been navigated to with the navigation controls.

5. An inactive marker. Inactive markers are displayed in gray, while the active marker is displayed in blue.

CHAPTER 8: Location-Based Services and Mobile Mapping

6. The zoom controls. These are provided by the Google Maps API for Android, as Android does not support multitouch events in the web browser at present. If you were to load the display on an iPhone, the zoom controls would not be displayed; however, other devices with a similar single-touch limitation would be likely to display the controls also.

No work will be required on our part to have these zoom controls display, but it is important to remember that they are displayed at the base of the map, and thus that part of the screen is accounted for.

NOTE: The preceding UI has been designed with fingers in mind. When designing a mobile UI, it is important to remember that your users will not be using the pixel-accurate selection of a mouse cursor. Rather, they will be using their fingers, which at their most accurate probably have a contact surface of about 10 pixels. If, as in the preceding mapping interface, it is possible that tappable elements will be in close proximity to one another (the markers in our case), think about providing alternative UI mechanisms to avoid causing your users frustration.

Dokumen yang terkait

AN AL I S I S P RO YE K S I P E NE RI M A AN P AJA K P E N G AM B I L AN D AN P E M A NF AA T AN AI R P E RM UK AAN ( P E NDA P A T AN P RO P I NS I JA W A T I M UR JE M B E R

0 9 20

ANALISIS HUMANIORA NOVEL MAIMUNAH CINTA SANGPERAWAN KARYA VANNY CHRISMA W

0 20 11

B E N T U K PE N GA W A S A N B E B A S V I S A K U N J U N G A N S I N G K A T ( B V K S ) O L E H K A N T O R K E I M I G R A S I A N K E P A D A W A R G A N E G A R A A S I N G Y A N G T I N G G A L D I I N D O N E S I A

0 4 15

E V A L U A S I P E L A K S A N A A N P E N D I S T R I B U S I A N P R O G R A M B E R A S M I S K I N ( R A S K I N ) T A H U N 2 0 1 1 D I D E S A G E N T E N G K U L O N K E C A M A T A N G E N T E N G K A B U P A T E N B A N Y U W A N G I

0 9 21

I D E N T I F I K A S I P E N G A R U H L O K A S I U S A H A T E R H A D A P T I N G K A T K E B E R H A S I L A N U S A H A M I N I M A R K E T W A R A L A B A D I K A B U P A T E N J E M B E R D E N G A N S I S T E M I N F O R M A S I G E O G R A F I S

0 3 19

TRY OUT UJIAN NASIONAL Pelajaran KIMIA W

0 14 6

Bahasa Indonesia IV Kelas 4 Sudaryono dan W Wiharsono 2010

0 41 224

Bahasa Indonesia V Kelas 5 Sudaryono dan W Wiharsono 2010

1 128 219

Matematika Kelas 12 Pratikno Bayan Ardana W Erens Sarindat Agus Ira 2008

1 36 186

PHP SEO Web UI UX Design Android Apps De

2 39 4