1

Theme Interface Design

............................................................................................. 11-12 7.................................................................................................................................3 Smart map ..................................................................... 3 2.... 7-8 6...........1 Colors ..................... A fail it is not the end........ EyeView .........................................................................................................12 Theme Interface Design 2 ........................................................................................................2......... Features .......................................................................2.......... Interface design .......................................Table of Contents 1....................................................................................................... How does it work? ............................................................................................................................................. 4 4............................... References ........................................................... Starting point ........... Inspiration ..........................................................................4............... 3 3.......................................................................................................................... Buttons ........................................................................................... 7 6..........................................................................................................11 6............................................... Search box ........... 8-10 6.................................................................................... 4 4.....1................. Dropped ideas...... 5 5..........................................................................................................................................................................................................................3. 5 4............................................... 4 4............12 8.............................................................. Marked................ Conclusion ........................................................ 6 6....................................................................................................................................................................

3 . we would need high-tech parking sensors that displays and keeps that system running smoothly and efficiently. We thought that at Aalborg Storecenter will be a huge underground parking lot with high-tech navigation system like a display that shows you where the free parking slots are. one for every entrance. also with this app the customer will be able to book a parking space. During our visit to Aalborg Storcenter we discovered that there was no parking system as we imagined. there were only a few navigation devices. Even more. This was because we navigated the storcenter and we saw that it was complicated to find shops and their locations. also we wanted to know if the shops that are opened without having to go around the whole shopping centre. there was a display that showed only the number of parking spaces available but it did not show where the free parking lots were. a parking navigation app for Aalborg Storcenter which will help the customer to easily reach the free parking lots at the storcenter. we decided that we would create a live navigation app to help customers to navigate easier no matter where they are in the centre especially older people and newcomers.Initially we wanted to design an app to experience a new form of navigation. So. We considered the fact that finding parking spaces can be a lot of work so we wanted to design a parking navigation that would let customers know exactly where to park their cars and the number of parking spaces available. Actually it was counting only how many cars entered and how many cars left the parking lot. But. and they were not working properly. a system that guides you there and above every parking slot a green or red light to distinguish free parking slots. We observed that the storcenter had a simple navigation system for navigation but we wanted to create something better. We knew that our idea for a parking system was better and would create a much better experience for the customers but we realised that it might be a bit too complicated and expensive because we need more than a simple app. Theme Interface Design After we dropped our first idea we decided to create an app that will help the customers navigate the shop easily. an app related to an internal navigation.

After we have chosen the grey theme. This idea was inspired by Google Maps. When we took a closer look we realized that actually the greyish one gives our app a more elegant and stylish look. Our app’s main feature must be based on a live navigation system so the customer knows exactly where they are in the storcenter. We wanted to make the visibility as good as possible and also we wanted to respect customer’s opinions and preferences that is why we have chosen greyish theme colours. We asked every single customer about the usability. Theme Interface Design More than a half preferred the greyish one because it looks more like a serious app and because of colours.We thought a few steps ahead and decided that the most efficient way to meet the customers needs would be to create a navigation app. aesthetics and functionality for both of our app versions. This live navigation will appear as a blinking red shape. the greyish colours increased legibility. a coloured one and a grey one. even though we preferred the coloured one. We want a simplistic interface with few colours so that is why we did a field research at Aalborg Storcenter. We found out that grey is a mixture between black and white in various proportions and there are two types of grey: warm grey and cool grey. We printed 2 versions of our app. The map will be plain with no shop names to avoid page overloading. where we asked 20 customers of all ages about our app. So we have made a research on the internet about the grey colour. The warm grey is a mixture grey and 6% yellow and the cooler grey is a mixture between grey and 6% blue. we asked ourselves exactly what kind of grey we want to use for our app. 4 .

So. That is why we chosen the rounded shaped buttons. because it is difficult for them to distinguish between every button. To increase even more the usability we put all of our buttons strategically on every screen in order to be reached as easier as possible conform to UI location map. we were inspired by the iBaby app. from what entrance you had entered in the storcenter and where you parked your car. We thought that our app will need a voice that gives you directions to get to every shop as well as a relaxing track that will play in the background. that uses only rounded shaped buttons. we will need big buttons with suggestive descriptions and icons to increase visibility. Having a large target group our app will have to respect everyone’s opinion. We wanted that this feature to be able to show you what shops have you visited up to a specific moment. so we dropped this idea. Like the older people told us. Another idea that we dropped is the history feature.From our interviewed customers 5 of them were over 50 years old and they suggested to us that we enlarge the buttons. Because we want to make sure that our app is used by as many users as possible. We then realized that this feature will be annoying for most of the users so we dropped this idea. Theme Interface Design 5 . Moreover they suggested to us that we put under every button a suitable description about what they each stand for. even a baby with low dexterity can manage to press them. If there will be such a feature the entire app will become much more complicated and it will not work 100% efficient if you do not turn on your app before you enter the storcenter. we decided to have a large target group. We had the grey colour when we asked ourselves: “What shape is perfect for our buttons?” We wanted that our customers can benefit of a great interface with easy to touch buttons.

(ASTC. 6 . tablets. Food. Music. On our app’s main page the customer will be able see their current location on the storcenter’s map.This app is called ASTC Nav. if you want. two big buttons for “MARKED” feature and a bar that can be swiped (Figure 1). a search box. Phones.. Sport. House. Electronics. Info desks and toilets will be displayed. Afterwards if you choose a sub-category you will be able to see all the shops related to that sub-category in alphabetical order.Aalborg Storcenter. You also have two more buttons: one for the search option and the other one for an alphabetical ordered list of all the shops from the storecenter (Figure 2). Jewellery. you can change between two languages: Danish or English.Navigation). more categories like laptops. both iOs and Android only if you have internet connection. For example if you choose Electronics. Once you choose the category. Cosmetics. a notification bar. It works on every smartphone or tablet. Nav. Moreover. Banks. Toys. Figure 1 Figure 2 Theme Interface Design If you action the swipe bar a screen with many categories as: Clothes. Pharmacy. TV will appear. subcategories will be displayed.

or if you want to delete them individually. This feature works as a reminder but it is more than this. If you press the “MARKED” button from the main screen. for a better visibility (Figure 3). The “MARKED” shops will appear orange on your map.Two buttons from the main screen are for “MARKED” feature. Theme Interface Design 7 . To make the map legible. a window will ask you one more time if you are sure that you want to delete the specified shop from your “MARKED” list. all your “MARKED” shops will be shown on the map. This is to ensure that you do not forget about this good deal and also allows you to check other shops and their offers too. After you decided what shop you want to delete. You can delete shops by pressing one time the “TRASH CAN” button and after you have to press on the “ALL” button to delete all your “MARKED” shops. By pressing this button you will be able to delete one or all shops from your “MARKED” list. In this way you will avoid map overloading. so as not to miss the best deals. Figure 3 Though there is also a “TRASH CAN” button for the same “MARKED” feature. For example if you see a pair of jeans at one shop and you think that it is a good deal. after you press the ”TRASH CAN” button you have to press on what shop you want to delete from the map (Figure 4). your experience and about their good deals. you can mark this shop. with this feature you are also able to take notes about every shop. This is a way to minimise the error of mistakenly deleting a marked shop (Figure 5). This feature allows you to mark a shop on the map in order to visit it one more time. you are now able to turn “MARKED” feature off by pressing for the second time the “MARKED” button and the orange areas will disappear.

These suggestions will be useful because it helps you to save a lot of typing time. contact. to mark that shop.Figure 4 Figure 5 In the search box the customer can type both shop names. in less than a moment a screen with details about that shop will pop out. If you click on the shop name. opening hours. categories or product name and in the next moment suggestions will appear similar to “Google Search” (Figure 6). Also you can click or swipe left and right on every name from the suggestions list. This screen will contain a small shop description. and the other button will be for “DIRECTIONS TO” feature (Figure 7). what credit-cards are accepted by the shop and two buttons: one for “MARKED” feature. Theme Interface Design 8 .

If you swipe the shop name to the right you will be able to mark that shop (Figure 9). This path is formed from multiple red dots that are easy to follow.Figure 6 Figure 7 On the other hand. marked with red. Theme Interface Design 9 . if you choose to swipe the shop name to the left you will be able to see “DIRECTIONS TO” your chosen shop on the map (Figure 8). After pressing “DIRECTIONS TO” a new screen will appear with the strorcenter’s map where you can see your chosen shop. you can see your current location in the shopping center connected to the selected shop through a blinking path. So.

This path is formed from multiple red dots that are easy to follow (Figure 10). Figure 10 10 Theme Interface Design .Figure 8 Figure 9 After pressing “DIRECTIONS TO” a new screen will appear with the strorcenter’s map where you can see your chosen shop. you can see your current location in the shopping centre connected to the selected shop through a blinking path. So. marked with red.

a map without shop names or logos. In this mode you are able to see arrows.Another great feature that our app provides is the “SMART MAP”. the gyroscope will automatically detect this gesture and the “Eye View” mode turns on. For example if you are holding your phone in the wrong direction the arrow will show you the right way to rotate your phone in order to see the path to the shop you have chosen (Figure 12). Figure 11 11 Theme Interface Design Our app will work with your tablet or phone’s gyroscope and camera. But. But this is not smart enough! Our “SMART MAP” will be able to rotate in the direction where are you facing. This feature comes in your help by showing you only the shops that are in front of you. If you select “DIRECTIONS TO” a shop and you hold your device in your hand. Once you are zoomed in you can distinguish very simplistic shop names over each shop on the map (Figure 11). On the first view it looks like a simplified random map. You are now able to see your live position on the “SMART MAP”. if you raise your phone. This feature will be very useful to get familiar with the shops from the storcenter and to navigate the shops easier. The path will be . lines or X-es. parallel with the ground you can see only the “SMART MAP” with a path to the shop selected. But if you look closer you will see that you are able to zoom in or zoom out by pinching. over your live camera mode to Figure 12 guide you to the selected shop.

2.2. 2! 1) http://appadvice. it will be marked with an X sign.com/appnn/2011/07/the-perfect-learning-app-for-tiny-fingers 2) http://venturebeat. if you have a tablet or a smartphone or if you are talking English or Danish. This is a completely new and different experience of navigation.displayed as a red dash line which goes straight to the chosen destination. a new interface and a improved compatibility for iOs 7 and the newest operation systems. app works only with iOs 6 and Android 4. stay tunned for ASTC Nav. Age does not matter at all! Even if you are a child or an older user. but for more features.wikipedia. All in all ASTC Nav.org/wiki/Grey 12 Theme Interface Design .com/2013/04/08/5-tips-for-creating-great-mobile-app-userinterfaces/ 3) http://en. . For the moment ASTC Nav. When you can see the destination. app it is the best choice if you are a newcomer or just you want to navigate easier and more efficiently the storcenter. you will be able to use this app and all features like an expert user because it is so simple to use.

Sign up to vote on this title
UsefulNot useful