CSCI102 Individual Project

8/16/2019 CSCI102 Individual Project

1/27

UNIVERSITY OF WOLLONGONG

SystemsIndividual Assignment

2016Case Scenario:Using the metaphor of shopping in superstore, identify the overall navigationstrategies that customers could use to find their way around a large media space

Submitted by: Student name: V Prathyaksha

Branch/Semester- Year 1 Semester 3

College/University- UOW

Date of Submission- 23 rd April 2016

Tutor: Dr. Lawrence Sim


2/27


3/27

- 3 -

Individual Assignment_ CSCI 102 Systems _V Prathyaksha_10155508

List of Figures

Figure 1: Model for Proposed Smart Phone Application ............... .......... ......... ......... - 5 -

Figure 2: Open Wifi Connection................................................................................ - 7 -

Figure 3: Application Icon ......................................................................................... - 7 -

Figure 4: Icon on Home Screen ................................................................................ - 8 -

Figure 5: Application VP Supermarket ......... .......... ......... .......... ......... ......... ......... ..... - 8 -

Figure 6: Language Options ..................................................................................... - 9 -

Figure 7: Language Selection .......... ......... .......... ......... ......... .......... ......... .......... ....... - 9 -

Figure 8: Application Icons ..................................................................................... - 10 -

Figure 9: Select Shopping ...................................................................................... - 11 - Figure 10: Choose Category - Page 1 .................................................................... - 11 -

Figure 11: Choose Category - Page 2 .................................................................... - 12 -

Figure 12: Choose Category - Page 3 .................................................................... - 12 -

Figure 13: Choose Category - Page 4 ........ .......... ......... .......... ......... ......... ......... ... - 13 -

Figure 14: Sub Category 1 ..................................................................................... - 14 -

Figure 15: Sub Category 2 ..................................................................................... - 14 -

Figure 16: Intermediate Users ................................................................................ - 15 -

Figure 17: 2D Map, level 1 ..................................................................................... - 15 - Figure 18: 2D Map, level 2 ..................................................................................... - 16 -

Figure 19:3D Map, level 1 ...................................................................................... - 17 -

Figure 20: 3D Map, level 2 ..................................................................................... - 18 -

Figure 21: Emergency Exit, Level 2 ........................................................................ - 18 -

Figure 22: Emergency Exit, Level 1 ........................................................................ - 19 -

Figure 23: Store Signage’s ..................................................................................... - 20 -

Figure 24: Exit Application ...................................................................................... - 21 -


4/27


5/27

- 5 -


2. Navigation Through The Store

The following section describes the proposed prototype smart phone application which

helps customers to navigate through the store and find their way around with use.

2.1 Model for Proposed Smart Phone Application

Figure 1: Model for Proposed Smart Phone Application

The proposed model consists of 4 steps as shown in Figure 1.


6/27

- 6 -


Step 1 – The customer enters the supermarket with a smart phone which

enables them to download the application with the open Wi-Fi connection

available in the superstore.

Step 2 – On successful installation of the application, the user is able to see the

menu and its options. Next step is to choose the required category and sub

category of the item. This leads to the display of location the item.

Step 3 – Using the preloaded interactive map in the application, the user shall

be able to navigate through the store. The map should be able to render 2D

and 3D routes, the usage of which might depend on the different navigation

styles of novice, intermittent and experienced users.

Step 4 - The above step should lead the customers to desired departmentalshopping area. On reaching the reaching the destination, the user should be

able to exit from the application or continue on with shopping if desired.

2.2 Prototype Smart Phone Application

Now, with the conceptual framework in place (as described in section 2.1), it is

possible to establish a prototype smart phone application. However, the success of this

application depends heavily on its user friendliness. The following steps illustrate the

interface of prototype mobile application, which eventually should easily navigate the

customers their way around the store.


7/27

- 7 -


2.2.1 Appl icati on VP Supermarket

Figure 2: Open Wi-Fi Connection

Wi-Fi will be automatically connected when the user enters the Super Store.

Figure 3: Appli cation Icon

The icon w ill appear once it’s connected. Pressing that icon will bring into the

app.


8/27

- 8 -


Figure 4: Icon on Home Screen

If the application is not needed, it will pushed aside till needed.

Figure 5: Application VP Supermarket

Application is automatically downloaded when the user walks into the store. The Wi-Fi

will be free within the store for all devices. The ‘EXIT’ icon is for people who do not

need the application and can exit to their device. After exiting, they can re-enter by

clicking on the application icon or by switching off and turning on the Wi-Fi again.


9/27

- 9 -


2.2.2 Language Options

Figure 6: Language Option s

Must be asked first since we assume that not everyone speaks English. There are 16

languages options. The first row is English, Chinese, Malay and Tamil. This is because

we are assuming the location of VP Supermart is in Singapore.

Figure 7: Language Selection


10/27

- 10 -


Choosing English option for the walk-through. The reason why the arrow must be

clicked each time the user needs to go to the next page and is not automatic is to allow

the user to make changes. It will be hard to change the language to something else,

especially if it an unknown language.

2.2.3 Icons

Figure 8: Application Icons

The other icons are part of the application but we are focusing on the ‘SHOPPING’

icon since the main focus is on the map. The ‘FULL MAP’ icon is of full map without

directions and start/stop p oints. It’s for the advanced users who don’t require

assistance and are satisfied with just a map which they can follow on their own. Certain

options like toilet and emergency will also give location and have a map option. Even

though all icons are black, the ‘EMERGENCY’ icon will be red to catch the user’s eye.

That icon will also provide a map for emergency exits and alternative routes in case of

any sudden scenario.


11/27


12/27

- 12 -


Figure 11: Choos e Category - Page 2

Figure 12: Choos e Category - Page 3


13/27

- 13 -


Figure 13: Choose Categor y - Page 4

Choosing ‘FRUITS & VEGETABLES” as the category for walkthrough. Notice that the

‘SUB -CATEGOR Y’ is not shown till we pick the category. And it removes the search

box at the bottom. This is because each category has its own sub-categories. i\the

sub-categories have to load from the database hence will require a 3 seconds waiting

time before going to the next page.

2.2.5 Choose Sub Category


14/27

- 14 -


Figure 14: Sub Category 1

In this case, ‘FRUITS & VEGETABLES’ have 2 sub -categories. Some may have more

than 2, therefore require a sub-category option. Colored pictures are used in the sub-

categories, unlike in the main categories where black and white pictures were used.

This is to allow the users who cannot read much to be able to understand where she

wants her end-point to be.

Figure 15: Sub Category 2


15/27

- 15 -


Figure 16: Intermediate Users

This page is for intermediate users who need the location but don’t need help with

direction. For novice users, they can go to the map by clicking on this arrow. (Pointing

to arrow). Advanced users can directly go to the map from the toolbar or follow the

intermediate or novice routes.

2.2.6 Interact ive Map (2D)

Figure 17: 2D Map, level 1


16/27

- 16 -


Floor One - Has the entrance and the exit. The options shown above will aid novice

users with the motion sensor map. The map will follow the footsteps of the user. It will

show the drop points at the start and the end position. Based on the walkthrough, we

are trying to find the ‘FRUITS’ section. The location was given. This location (level 2,

row 7) will be the end point. Let us assume that the person is currently near row 18 of

level 1. That position will be the starting point. The sound option will have a voice

telling the directions with arrows shown on the floor of the map. The green arrow is the

direction.

Figure 18: 2D Map, level 2

Floor Two

Color coding for the map of the 2 floors:

Blue: Customer Service Rooms

Green: Seating Areas

Red: Payment Counters

Yellow: Shelves (mainly), Toilet and other facilities

Green spot: starting point

Red spot: ending point


17/27

- 17 -


Note that the shopping maps do not show emergency exits. Only the emergency map

will show them. This is because we are assuming that the emergency exits are not

used during regular days.

2.2.7 Interact ive Map (3D)

Figure 19:3D Map, level 1

This is how the 3D would look like. The colors of the shelves etc. should be the same

as the 2D map to prevent confusion for the user. Similarly, the start-point, end-point

and the direction arrows should be the same as well. The only difference is that in this

version, everything will be in 3D.


18/27


19/27

- 19 -


Floor Two - This is how the emergency map will look like. Everything will be in grey as

the location of shelves is not needed at this point. The red points are emergency stairs

and exits.

A message should appear to warn users to not use the escalators. In the walkthrough,

we are using the same route as the normal map, from the fruits section to out of the

Supermart. The red spot is the starting point. It points to the nearest staircase to the

first floor.

Both normal map and emergency map can zoom in and zoom out depending on the

user’s vision.

Figure 22: Emergency Exit, Level 1

Floor One - Continuing from previous page, the user would now be in the first floor. He

continues to follow the red arrows to the exits, which will have a green spot. The

reason why the start/end points are different colours that the normal map is that the

ending point and the emergency exit cannot be the same colour. The voice will

similarly give the user the right instructions.


20/27

- 20 -


For all the maps, there will be a standard set of instructions: “move left”, “move right”,

“walk straight”, “turn around and face behind you”, “shelf/exit/etc. is on your

left/right/etc.”

In case of user walking in the wrong direction, instructions will be: “stop, wrong

direction, please wait while I re- calculate the route”. This should not take more than 3

seconds as if it takes too long, it will affect the user when there is an emergency.

2.2.9 Store Signage’s

Figure 23 : Store Signage’s

The green icons will show on the map as well. This is useful for the user to understand

where each facility is, especially on the 2D map. (Ignore the grey words and numbers).


21/27

- 21 -


2.2.10 Exit Application

Figure 24: Exit Appli cation

Exits from application. To re-enter application, there will be an icon which will provide

access to the application again.

3. Assumptions

Assumptions

Not everyone speaks English (have options with16 languages).

Main focus is map.

Supermart is a 2 stories high and they all have row numbers for identification.

VP Supermart is based in Singapore, in a non-remote area and with no

technological, network and/or communication constraints.

All customers use touch screen phone/tablet.

Application has a database with all the relevant details of shelves, escalator,

counters etc., which includes geographic coordinates.

Safety procedures are assumed already in place and not mentioned in detail.

Only navigation to the emergency exits are shown.


22/27

- 22 -


My plans

IPS: - a network of devices used to wirelessly locate objects or people inside a

building.

2D and 3D mapping possible.

A toolbar for quick access to basic uses.

Using buttons with icons which are standard in many places.

4. Checkl ist Based on Nielsen Heuris tics

Visibility of system status

There is no more than a time gap on 3 seconds between choosing options in

application and clicking the arrow to the next page as the item etc. has to be

searched in the database.

Other left/right arrow movement will not have any time gaps.

Match between system and the real world

There is a language option with 16 most-spoken languages.

Each category and sub-category is with a picture for people who cannot read.

All icons for various functions uses standard symbols common in most places.

Emergency based directions and icons are in red, so that it stands out from the

other icons.

User control and freedom

While using map, there is a play/pause button (same button), a rewind button

and a stop button.

In the rest of the app, the user can use the forward/backward arrow.

Consistency and standards

All words used are the same throughout the application.


23/27


24/27

- 24 -


Intermediate: there will be a pop-up with the error, with an option button, which

will show how to fix the problem.

Advanced: either they can solve it on their own without any assistance, or they

can use any of the other 2 options mentioned for beginners and intermediate

users.

Help and documentation

The entire database can be viewed, although the list can be better searched

with the search box.

There is a Frequently Asked Questions (FAQ) icon for commonly asked

questions and its answers.

5. Conclusion and Recommendations

The purpose of this project was to identify navigation strategies for users to use at a

supermarket. I used examples such as Ikea, Carrefour, and Giant etc. as a base for

the new VP Supermart. Considering different kinds of people and their usage with

technology, more specifically mobile devices and tablets, the application shown in the

previous pages would have given us a walkthrough on how the novice, the intermittent

and the experienced computer users can use the map-based application, with some

added facilities, to find their way around VP Supermart without much trouble. I also

followed the Nielsen heuristics very closely so that the map application satisfies all its

conditions.

There were many things I focused on for the novice users. Pictures are used for the

categories and sub-categories to help people who cannot read very well. This will aid

them to be chose their end points for the map. The starting point of the map is

something the device will detect automatically. A voice-based direction is also useful

for people who cannot read map well to follow the directions. The map is colour coded

based on the type of destination. For example, the shelves are yellow and the

emergency exits are red. These are commonly used colours used in most maps.

The intermittent users can also use this application, without going through the whole

selection process. They can use the search bar to type in their end product. When the

database has the product the user is looking for, it will display the product for the user


25/27

- 25 -


to select. Else, it will prompt the user to enter a different product or check for spelling

errors. The application should be able to detect spelling errors, in case the user is in a

rush.

The experienced users can go to the map directly without an end point. The map can

be zoomed in and out. It also can change from 2D to 3D and vice versa. All shelves

also have a number. This helps the user to navigate the map on their own.

The map will also have crowd control. When the user uses the search bar or the

categories to look for the nearest cashier counters, it will also display the waiting time.

Novice users will choose either the nearest cashier or the one with the shortest waiting

time. But in case the waiting time is too much, the experienced users can pay with their

credit cards and the barcode scanner on their devices to save time by doing the

checkout on their own.

There is also emergency control as part of the map development. The usual map will

be colourful, which will also include shelf numbering and the crowd control. The

emergency map will highlight only the emergency routes and exits, which are red. The

rest of the map will be grey. Some parts in the emergency exits are not shown in the

normal map as these exits are assumed to be out of bounds on normal days.

The map also has error control. In case the user types in an item not found in the

database, the user will be prompted to re-enter. If the user walks away from the path

mentioned on the map, without pausing the map, they will be prompted to stop walking

and will be re-directed to their destination by re-calculating the shortest distance again.

After evaluating GPS and IPS on the technology front, my recommendation is to use

IPS (Indoor Positioning System) for this digital map. Every row and shelf will have ananchor. These anchors will continuously locate the tags for the device to sense. IPS

calculates your location by using your Wi-Fi signal strength. It is different from using

GPS (Global Positioning System) as GPS receiver has to be locked onto signals from

3 or more satellites for it to be able to pinpoint a position and track movement.

Therefore, IPS is a better method for trying to find a certain section/shelf in the

Supermart.


26/27

- 26 -


6. References

https://cdn3.iconfinder.com/data/icons/mobile-1/100/Icon_Tablet-512.png

https://www.askdavetaylor.com/how-do-i-update-apps-on-my-android-tablet/

https://maps.googleblog.com/2012/01/get-indoor-maps-of-las-vegas-casinos.html

http://www.clker.com/clipart-start-button-4.html

http://www.clker.com/clipart-exit-button-1.html

https://www.designcontest.ca/free-tshirt-templates/

http://www.dragoart.com/tuts/4897/1/1/how-to-draw-a-simple-baby.htm

http://www.123rf.com/photo_13101720_bread-doodle.html

https://www.vectorstock.com/royalty-free-vector/wine-bottle-and-glass-vector-162461

http://coloringhub.com/tasty-and-milky-dairy-coloring-pages/dairy-coloring-pages-5/

http://superawesomevectors.com/hand-drawn-line-art-old-tv/lineart-tv-eps-2/

s9q.dromfjb.top

https://www.pinterest.com/pin/69172544251940033/

http://nomoredirtylooks.com/2011/02/the-no-soap-challenge-the-results-are-in-and-we-

have-a-winner/

http://crackwalking.blogspot.sg/2012_11_01_archive.html

http://www.fotosearch.com/photos-images/organic-food.html

http://www.drawingnow.com/tutorials/117946/how-to-draw-a-puppy/

https://cnx.org/contents/DkHhPnY5@1/Poultry-farming

http://coloringpanda.com/printable-toy-story-coloring-pages

www.dromgah.top

http://www.kikaenterprises.com/gps-vs-ips-difference/

http://coloringpanda.com/ball-and-bat-coloring-pages

https://www.pinterest.com/herladyelise/random-drawing-references/

https://cdn3.iconfinder.com/data/icons/mobile-1/100/Icon_Tablet-512.pnghttps://cdn3.iconfinder.com/data/icons/mobile-1/100/Icon_Tablet-512.pnghttps://www.askdavetaylor.com/how-do-i-update-apps-on-my-android-tablet/https://www.askdavetaylor.com/how-do-i-update-apps-on-my-android-tablet/https://maps.googleblog.com/2012/01/get-indoor-maps-of-las-vegas-casinos.htmlhttps://maps.googleblog.com/2012/01/get-indoor-maps-of-las-vegas-casinos.htmlhttp://www.clker.com/clipart-start-button-4.htmlhttp://www.clker.com/clipart-start-button-4.htmlhttp://www.clker.com/clipart-exit-button-1.htmlhttp://www.clker.com/clipart-exit-button-1.htmlhttps://www.designcontest.ca/free-tshirt-templates/https://www.designcontest.ca/free-tshirt-templates/http://www.dragoart.com/tuts/4897/1/1/how-to-draw-a-simple-baby.htmhttp://www.dragoart.com/tuts/4897/1/1/how-to-draw-a-simple-baby.htmhttp://www.123rf.com/photo_13101720_bread-doodle.htmlhttp://www.123rf.com/photo_13101720_bread-doodle.htmlhttps://www.vectorstock.com/royalty-free-vector/wine-bottle-and-glass-vector-162461https://www.vectorstock.com/royalty-free-vector/wine-bottle-and-glass-vector-162461http://coloringhub.com/tasty-and-milky-dairy-coloring-pages/dairy-coloring-pages-5/http://coloringhub.com/tasty-and-milky-dairy-coloring-pages/dairy-coloring-pages-5/http://superawesomevectors.com/hand-drawn-line-art-old-tv/lineart-tv-eps-2/http://superawesomevectors.com/hand-drawn-line-art-old-tv/lineart-tv-eps-2/http://s9q.dromfjb.top/c/apple-drawing-for-kids/https://www.pinterest.com/pin/69172544251940033/https://www.pinterest.com/pin/69172544251940033/http://nomoredirtylooks.com/2011/02/the-no-soap-challenge-the-results-are-in-and-we-have-a-winner/http://nomoredirtylooks.com/2011/02/the-no-soap-challenge-the-results-are-in-and-we-have-a-winner/http://nomoredirtylooks.com/2011/02/the-no-soap-challenge-the-results-are-in-and-we-have-a-winner/http://crackwalking.blogspot.sg/2012_11_01_archive.htmlhttp://crackwalking.blogspot.sg/2012_11_01_archive.htmlhttp://www.fotosearch.com/photos-images/organic-food.htmlhttp://www.fotosearch.com/photos-images/organic-food.htmlhttp://www.drawingnow.com/tutorials/117946/how-to-draw-a-puppy/http://www.drawingnow.com/tutorials/117946/how-to-draw-a-puppy/https://cnx.org/contents/DkHhPnY5@1/Poultry-farminghttp://coloringpanda.com/printable-toy-story-coloring-pageshttp://coloringpanda.com/printable-toy-story-coloring-pageshttp://www.dromgah.top/c/piano-drawing-for-kids/http://www.kikaenterprises.com/gps-vs-ips-difference/http://www.kikaenterprises.com/gps-vs-ips-difference/http://coloringpanda.com/ball-and-bat-coloring-pageshttp://coloringpanda.com/ball-and-bat-coloring-pageshttps://www.pinterest.com/herladyelise/random-drawing-references/https://www.pinterest.com/herladyelise/random-drawing-references/https://www.pinterest.com/herladyelise/random-drawing-references/http://coloringpanda.com/ball-and-bat-coloring-pageshttp://www.kikaenterprises.com/gps-vs-ips-difference/http://www.dromgah.top/c/piano-drawing-for-kids/http://coloringpanda.com/printable-toy-story-coloring-pageshttps://cnx.org/contents/DkHhPnY5@1/Poultry-farminghttp://www.drawingnow.com/tutorials/117946/how-to-draw-a-puppy/http://www.fotosearch.com/photos-images/organic-food.htmlhttp://crackwalking.blogspot.sg/2012_11_01_archive.htmlhttp://nomoredirtylooks.com/2011/02/the-no-soap-challenge-the-results-are-in-and-we-have-a-winner/http://nomoredirtylooks.com/2011/02/the-no-soap-challenge-the-results-are-in-and-we-have-a-winner/https://www.pinterest.com/pin/69172544251940033/http://s9q.dromfjb.top/c/apple-drawing-for-kids/http://superawesomevectors.com/hand-drawn-line-art-old-tv/lineart-tv-eps-2/http://coloringhub.com/tasty-and-milky-dairy-coloring-pages/dairy-coloring-pages-5/https://www.vectorstock.com/royalty-free-vector/wine-bottle-and-glass-vector-162461http://www.123rf.com/photo_13101720_bread-doodle.htmlhttp://www.dragoart.com/tuts/4897/1/1/how-to-draw-a-simple-baby.htmhttps://www.designcontest.ca/free-tshirt-templates/http://www.clker.com/clipart-exit-button-1.htmlhttp://www.clker.com/clipart-start-button-4.htmlhttps://maps.googleblog.com/2012/01/get-indoor-maps-of-las-vegas-casinos.htmlhttps://www.askdavetaylor.com/how-do-i-update-apps-on-my-android-tablet/https://cdn3.iconfinder.com/data/icons/mobile-1/100/Icon_Tablet-512.png


27/27

- 27 -

http://edequity.org/szlag.php?q=secretary-of-state-michigan&page=2
http://edequity.org/szlag.php?q=secretary-of-state-michigan&page=2http://edequity.org/szlag.php?q=secretary-of-state-michigan&page=2http://edequity.org/szlag.php?q=secretary-of-state-michigan&page=2

CSCI102 Individual Project

Documents

Transcript of CSCI102 Individual Project