Design a new cutting edge Aviation Navigation app

Technologie

We have a very popular aviation navigation app, iFly GPS. It's been rewritten to improve the user interface and overall polish. The new UI is "skinnable", and we need a better skin.

iFlyGPS.com

The app will be used in-flight in small airplanes, so user might be bouncing around in turbulence and in bright sunlight. For these reasons colors need to be high contrast, buttons large and easy to touch, fonts should be large, etc. In order, these are my requirements: - Clean, Intuitive interface - High contract, usable in rough environments - Business-like, with a small touch of flare The images I'm uploading are the developers prototype for these forms.

New app will be called iFly EFB

The images I'm uploading are the developers prototypes, they are not intended to be final design. Only the general layout and flow of this app is fixed - how buttons look, how lists are treated, how selected items look, colors, fonts, etc, are up to you. I will detail some of what I like and don't like on each of these screens. These shots are from a 9” android tablet emulator. Screen 1: Map screen. Ignore the map, I'm interested in your design for the instrument stack at the top of the screen, the buttons on the bottom and sides, and the pop-up alert form. What I like/don’t like about this page: It scales easily for different size devices (the instrument blocks at the top of this page will slide closer together, making the center instrument smaller/larger which works fine. In portrait they stack, see 1b). I like how the instrument lables are different color than the content, and the important content is easy to see. Don’t like the brown outline. A possible “touch of flare” here could be a wood grain instrument outline, but need to consider how that would scale on smaller devices without simply making everything smaller. The buttons along the bottom are a little small, but they are obviously buttons, and they scale easily with portrait or different size devices. Don’t like the brown outline, but they are high contrast and easy to see. The zoom in/out buttons on the right side are floating buttons, they will be there on certain maps (and there are other floating buttons that may appear) - these are a bit lost due to the transparency. The “Alert” box at the bottom of this form pops to give the user important information. I don’t like how it looks like a giant button, and too much empty space. This just needs to be reworked. Screen 2: This form allows the user to change the base map, select/deselect layers, and drill into additional settings for each layer. It's accessed by touching the "Map Mode" button on the main map page. It has 3 sections: The first section is tabs that change the map from 1 full-screen map, or 2 different maps. The 2nd section, “VFR”, “IFR”, etc…this lets you change the base map. And the 3rd section is a list of optional layers, which is specific to the selected base map. This section scrolls, there could be 15-20 different layers. What I like/don’t like: But the different sections of this form seem to bleed together, it’s easy to miss the top tabs entirely. The Base Map buttons (VFR, IFR, etc) are washed out, except for the selected one. Need a few more items to show up on the list of layers, so each of those items can be a bit smaller. And the meta-data about the layer shouldn’t be as bright as the layer name (example “Airmet / Sigmet” is a layer name, “Updated 2 minutes ago” just gives the user a bit of nice info that the data was recently updated…this can be smaller/greyed out a bit more). Screen 3: This is the Airport Information form. It's a tall scrollable page with lots of data to show, most in a grid-like format. This can be a very tall form, it’s scrollable – see 3b, 3c, as I scroll through this form. Starts with a thumbnail image of the airport and the most important information. The additional details follow, mostly in label/data format. I like the high contrast of this form, and the section labels are clear. I like how the map is greyed out when this form pops (we do that for all pop-up forms). The “Options” button at the very top of this form is actually important, and it seems a bit too small and lost. The Close button (the “X” at the top/right) closes the form – this is a pattern throughout the app. Need to make sure this is obvious and easy to touch, and not easy to accidentally touch. It’s not obvious that this page scrolls…need to solve that. Scroll bar perhaps? Or we could “bounce” the scrollable content when the form first pops up to make it obvious it’s scrollable. Would like your thoughts on that.

Nothing cartoonish. Buttons are images, so can look raster or vector drawn as you see fit. To minimize code, I prefer form designs that work in landscape and portrait modes - but we can have different designs for these layouts if it makes sense.

Jede Design-Kategorie bietet Flexible Preise für jedes Budget. Die Kategorie App-Design beginnt bei 549 €.