1

Theme Interface Design

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

Theme Interface Design

Initially we wanted to design an app to experience a new form of navigation, a parking navigation app for Aalborg Storcenter which will help the customer to easily reach the free parking lots at the storcenter, also with this app the customer will be able to book a parking space. 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. During our visit to Aalborg Storcenter we discovered that there was no parking system as we imagined. 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, a system that guides you there and above every parking slot a green or red light to distinguish free parking slots. But, there was a display that showed only the number of parking spaces available but it did not show where the free parking lots were. Actually it was counting only how many cars entered and how many cars left the parking lot. 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, we would need high-tech parking sensors that displays and keeps that system running smoothly and efficiently.

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. 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. We observed that the storcenter had a simple navigation system for navigation but we wanted to create something better. Even more, there were only a few navigation devices, one for every entrance, and they were not working properly. So, 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.

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. This idea was inspired by Google Maps. Our apps main feature must be based on a live navigation system so the customer knows exactly where they are in the storcenter. This live navigation will appear as a blinking red shape. The map will be plain with no shop names to avoid page overloading.

We want a simplistic interface with few colours so that is why we did a field research at Aalborg Storcenter, where we asked 20 customers of all ages about our app. We printed 2 versions of our app, a coloured one and a grey one. We asked every single customer about the usability, aesthetics and functionality for both of our app versions.

Theme Interface Design

More than a half preferred the greyish one because it looks more like a serious app and because of colours, the greyish colours increased legibility. We wanted to make the visibility as good as possible and also we wanted to respect customers opinions and preferences that is why we have chosen greyish theme colours, even though we preferred the coloured one. When we took a closer look we realized that actually the greyish one gives our app a more elegant and stylish look. After we have chosen the grey theme, we asked ourselves exactly what kind of grey we want to use for our app. So we have made a research on the internet about the grey colour. 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. The warm grey is a mixture grey and 6% yellow and the cooler grey is a mixture between grey and 6% blue.

From our interviewed customers 5 of them were over 50 years old and they suggested to us that we enlarge the buttons, because it is difficult for them to distinguish between every button. Moreover they suggested to us that we put under every button a suitable description about what they each stand for. Because we want to make sure that our app is used by as many users as possible, we decided to have a large target group. Having a large target group our app will have to respect everyones opinion. Like the older people told us, we will need big buttons with suggestive descriptions and icons to increase visibility. 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. So, we were inspired by the iBaby app, that uses only rounded shaped buttons, even a baby with low dexterity can manage to press them. That is why we chosen the rounded shaped buttons. 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 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. We then realized that this feature will be annoying for most of the users so we dropped this idea. Another idea that we dropped is the history feature. We wanted that this feature to be able to show you what shops have you visited up to a specific moment, from what entrance you had entered in the storcenter and where you parked your car. 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, so we dropped this idea.

Theme Interface Design

This app is called ASTC Nav. (ASTC- Aalborg Storcenter, Nav.- Navigation). It works on every smartphone or tablet, both iOs and Android only if you have internet connection. Moreover, if you want, you can change between two languages: Danish or English. On our apps main page the customer will be able see their current location on the storcenters map, a search box, a notification bar, two big buttons for MARKED feature and a bar that can be swiped (Figure 1).

Figure 1

Figure 2

Theme Interface Design

If you action the swipe bar a screen with many categories as: Clothes, Sport, Music, Cosmetics, Food, Jewellery, Pharmacy, House, Phones, Toys, Electronics, Banks, Info desks and toilets will be displayed. 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). Once you choose the category, subcategories will be displayed. For example if you choose Electronics, more categories like laptops, tablets, TV will appear. Afterwards if you choose a sub-category you will be able to see all the shops related to that sub-category in alphabetical order.

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

Theme Interface Design

Figure 4

Figure 5

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

Figure 6

Figure 7

On the other hand, 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). If you swipe the shop name to the right you will be able to mark that shop (Figure 9). After pressing DIRECTIONS TO a new screen will appear with the strorcenters map where you can see your chosen shop, marked with red. So, you can see your current location in the shopping center connected to the selected shop through a blinking path. This path is formed from multiple red dots that are easy to follow.

Theme Interface Design

Figure 8

Figure 9

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

Figure 10

10

Theme Interface Design

Another great feature that our app provides is the SMART MAP. You are now able to see your live position on the SMART MAP. On the first view it looks like a simplified random map, a map without shop names or logos. But if you look closer you will see that you are able to zoom in or zoom out by pinching. Once you are zoomed in you can distinguish very simplistic shop names over each shop on the map (Figure 11). This feature will be very useful to get familiar with the shops from the storcenter and to navigate the shops easier. 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.

Figure 11

11

Theme Interface Design

Our app will work with your tablet or phones gyroscope and camera. If you select DIRECTIONS TO a shop and you hold your device in your hand, parallel with the ground you can see only the SMART MAP with a path to the shop selected. But, if you raise your phone, the gyroscope will automatically detect this gesture and the Eye View mode turns on. In this mode you are able to see arrows, lines or X-es, over your live camera mode to Figure 12 guide you to the selected shop. 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). The path will be

displayed as a red dash line which goes straight to the chosen destination. When you can see the destination, it will be marked with an X sign. This is a completely new and different experience of navigation.

All in all ASTC Nav. app it is the best choice if you are a newcomer or just you want to navigate easier and more efficiently the storcenter. Age does not matter at all! Even if you are a child or an older user, if you have a tablet or a smartphone or if you are talking English or Danish, you will be able to use this app and all features like an expert user because it is so simple to use. For the moment ASTC Nav. app works only with iOs 6 and Android 4.2.2. , but for more features, a new interface and a improved compatibility for iOs 7 and the newest operation systems, stay tunned for ASTC Nav. 2!

1) http://appadvice.com/appnn/2011/07/the-perfect-learning-app-for-tiny-fingers 2) http://venturebeat.com/2013/04/08/5-tips-for-creating-great-mobile-app-userinterfaces/ 3) http://en.wikipedia.org/wiki/Grey

12

Theme Interface Design