mStore - Presentation

This post allows access to the presentation slides of mStore application. Basically it briefly introduces all the features discussed in previous posts and acts as a support for the grading presentation.

The presentation can be found here

mStore - "Searching a movie" Use case

User have two possibility to search a movie: touching screen(browsing) or by voice.Because an use case using voice command was wrote in another post, I will describe an use case how an user can search a movie with touching gestures. Steps are illustrated below.


1. From the main page tap the Search icon.

2. After that the next page will appear. Here you must write in the text search using the keyboard. The text is suggested by Auto-complete function.

After that you have to press Search button on the right top. Then the keyboard will disappeared and a list with searched text will be displayed on the screen. Tap the link with the movie and proceed with the next step.

3. In this section you have details about movie by pressing details button, you can view reviews, opinions and articles or watch a movie trailler by pressing the links related to your wishes.

4. When done tap the Add to basket button to place the movie into the shopping cart. 

mStore - Use Case

One of the main feature of our application is that user can perform actions without touching the screen, but only with vocal commands. The following steps describe an use case, where a user buy Tichets, with voice commands.
1. First of all user must change settings of the Vocal Navigation.
So Vocal Navigation Settings button must be pressed, and here he must check:
a. Enabledb. Enable "Show grid on sound", if he wants a help of guiding vocal navigation trough the selection point.
Also an important step is to train the application with own voice. This can be done by pressing Train Vocal Recognition. Here some lettern and numbers need to be pronunced, so the application to recognize the commands.
When done we must return from here by pressing back button.
All the changes from this settings page will be automatically saved.

2. Than we will go to home by pressing mStore button in the top left of the screen.

3. For buying tickets user must say A-5 and the selection will move automatically to the ticketing page.

4. Choose seats and type Finish.

mStore - Bought Tickets

This is th
This is the bought ticket page. There are few infos on the ticket like movie name, places and dates.
There is also the possibility to cancel the tickets.
Another option is to use the tickets to get access at the event.
By pressing the "Use Tickets" a signal is sent to another device and the tickets are marked as used and the persons are allowed access to the event.

mStore - Questions, Options, Criteria

QOC ( Questions, Options, Criteria ) is used for design space analysis. It identifies the key design problems as questions and possible answers to questions as options.
QOC uses criteria to explicitly describe the methods to evaluate the options, such as the requirements to be satisfied or the properties desired. The options are linked with criteria positively or negatively and these links are defined as assessments.

1. How a user can navigate ?

O1: Touch screen
O2: Vocal navigation
C1: Accessibility
C2: Touch screen only interaction

2. How user can buy a movie ?

O1: Navigate through menu to movie store
O2: Search movie
C1: Accessibility
C2: Low user effort

3. How to display options and settings buttons ?

O1: Action bar
O2: Menu
O3: Dropdown list
C1: Accessibility
C2: Common pattern

mStore - Use Case Diagram

Here there is an use case diagram describing our application, and user's main actions.

mStore - User Manual

In this manual you will find technical information like finger gestures, switching between tabs, how to search for an item, how to change settings, how to buy items and more. 


User manual for our project called mStore can be found here.

mStore - Buying tickets

mStore has the option to buy tickets. The first screen allows the user to select the number of tickets for each age segment and allows access to the second screen where the user will select the places for the tickets.

mStore - Payment options

This screen allows us to choose the payment mode and configure multiple payment modalities.

mStore - General settings

This screen allows the the user to configure multiple options regarding physical addresses, names payment method and item display mode.

mStore - Internationalization

This screen allows us to configure various settings related to Language settings like store general language, movies language filter and other.

mStore - Category browsing

This screen shows how are displayed multiple categories in a tree like manner. One thing to note here is that when more that 2 levels deep categories are reached, only the deepest two categories are displayed. The others are hidden in the upper part of the screen.














The second screen shows the same categories browsed but now the results are displayed as a list and not as a grid. This feature is configurable from the "General settings" menu.

mStore - Vocal navigation

This store supports vocal navigation by speaking horizontal and vertical coordinates. These coordinates can be visualized by making a sound previously configured.
The screen on the left shows the screen slightly faded and a grid on top of it. Horizontal lines are noted with letters and vertical lines are noted with numbers (other combinations are also available).
to enter in the Music category you have to speac the combination corresponding to the Music button on the first line which is "A-2".









The second screen helps you configure the vocal navigation functionality. You can enable/ disable it, enable or disable "Show grid on sound" or set the grid lines noting mode. Vocal navigation mode can be configured in following ways:

• letters and numbers.
• only letters on both X and Y axis.
• numbers on both X and Y axis.

Another function configurable from this screen is the "Show grid" sound. This sound is used to show grid without touching or pressing any button. The grid will appear for a short period of time (1 second) to guide the user in speaking the correct coordinates of each button.
However, after a period of time of using the vocal navigation, this grid won't be necessary at all because the user will learn the coordinates.



Another feature related to vocal navigation is the "Training" screen. This screen is useful to configure the application to correctly identify your voice and the coordinates you are targeting by voice.
The training session requires the user to speak letters and numbers as well as few combination of these.

mStore - First page and scrolling

This is the first page of the store. On the top site there are five buttons each with specific functionality as follows:

• first button on the left takes the user to the configuration screen where options like email address, payment mode and item display mode can be configured.
• the second button shows a grid used for vocal navigation.
• third button allows configuring store language, results languages and more.
• the fourth button shows the shopping cart page.
• the fifth button opens the search function of the store.

Right under this top bar, there is the first line displaying four of the main categories. These main categories may contain subcategories or only products.
The fourth category from the right is slightly faded, this thing meaning that there more than four categories and we must scroll to the left to uncover them. This is a general pattern used in the entire store: to show that there are more items that what is displayed the last visible item is slightly faded. This scroll method is available for both the horizontal and vertical items.
For each of the four main categories, under the "Most popular" band there is a row displaying most popular items in the respective category. These items are as well scrollable on the horizontal.
Scrolling these categories can be done in two ways:

• scrolling the categories icons in the top (right and left)
• scrolling the rows with the most popular items on the vertical.

One thing to note here is that either of the scroll methods used will scroll the other part as well.
This feature is illustrated in the second wireframe below.
It can be observed that the scroll appeared in both sides (left and right) on the categories row.
















In the third wireframe the scroll on the horizontal items is presented:

• first row with applications has scroll on the both sides.
• the second row has reached the maximum scroll on the right.
• the last two rows are not scrolled.

mStore - Shopping cart

Unlike other similar applications our mobile store has an Shopping cart allowing the user to add multiple items to it and review before buying.
Also a unique feature of our shop is the possibility to pay using other methods than trough carrier (eg: credit card, paypal etc.).

First thing to notice when we're viewing the cart is that the cart icon in the top is presented like a "Selected Tabitem" (1).
(2) shows the number of items in cart and (3) shows the total value of the items in cart.
Button (4) is the "Check out" button used to proceeed to the payment page.
Button (5) is used to remove specific items from cart. (6) and (7) show the price and rating of the items in cart.
Items icon and name are denoted by (8), (9) being the current number of the items in store.

mStore - Search

The Search wireframe is presented in the figure. As you can see from the picture, on the top we have the posibility to enter a text that can be suggested by the autocomplete function(1 and 3) and on the right part we have the search button(3). On the bottom of this wireframe the keyboard is presented which means an easy way to type the text that you are searching for(4). After pressing the search button, the keyboard will disappear and the result will be displayed in function of the user profile and the text searched.

mStore - Gestures

The main navigation and interaction method of the shop are gestures. The supported gesture set is meant to simplify the navigation in categories and products.
For the Home Page (a) the main gestures are displayed in the above wireframe and their efects are the following:

1. single tap - opening the pressed item.
2. single tap - same as 1.
3. one spread - populating the "Most Popular" section only with items of the expanded type.
4. horizontal scrolling - scrolling trough items of a certain type on a single row.
5. scrolling vertically - scrolling trough multiple types of "Most Popular" items if present.

Gestures supported by the Categories Page are:

1. expanding a category ignoring subcategories.
2. scrolling horizontally trough categories/subcategories.
3. expanding an item (also available by single tap).
4. scrolling vertically.
   

mStore - Category Browsing

Category browsing is done in a tree like manner. However, tree levels are presented horizontally. Tree nodes that are expanded (1) are presented in full contrast while unselected nodes are faded out (2).

If tree depht is bigger than the one presented in the near wireframe, the tree nodes are scrolled up, leaving at least half of the screen available for final items or subcategories.

Items at the bottom of the page are again faded out suggesting that more items are available for scrolling.

Scrolling for items is done only in the portion of the screen available for products, items at the top of the scrolling area being hidden when scrolling down.

mStore - Product Page

This wireframe represents the product page, in this case a movie. On top we have few information about price, the size of the movie, the category and the rating of the movie. Here, by "clicking" on the star icon you should see reviews and some comments of the movie. On the left of the screen is the movie icon and on the right part the download button which gives you the posibility to download on the phone the respective movie. In the description part you can view the resume of the movie and you can detail the description by clicking on more button. At the bottom of this wireframe, by "clicking" the "play" icon you have the posibility to view some frames from the movie.

mStore - Design Patterns

In the application we have the following design patterns, categorized by each wireframe:

Wireframe HomePage

Main Navigation

• It is a fixed horizontal menu at fixed position in the top of the application, counting 4 items
• The current selected item is highlighted

Action Bar

• Is Placed in top right of the screen
• Contains icons for Internationalization, Shopping Chart and Search
  

Screen Interaction

• Touch screen interaction pattern

Wireframe Category Browsing

Double Tab Navigation

• The users can navigate a hierarchical structure into application
• Each second level menu is sublevel of one item from Main Menu
• Each item selected from menus are highlighted

Continuous Scrolling

• It is used when number of items are too large to be shown in one screen

Wireframe Shopping Chart

Shopping Chart

• Is useful when users can put their products in before they actually purchase them
• Icon to shopping chart is placed in every page of the application
• Contains total number of items, total price, name of the items, items' rating, price and remove button

Wireframe View Product

Video Content Play Icon

• Two icons places in the bottom of the page, for watching video content

Content Hiding

• The description of the item is not showed integrally because of the availability of space
• All content can be seen by clicking More button
  

mStore - Homepage

The purpose of the homepage is to provide an overview of the main categories available in store.
In the following wireframe we have two possible screens, both presenting the homepage but with different purposes.At the top of the printscreen on the first line we have 4 buttons with different functionalities:

1. enable speak navigation and preview grid with coordinates; see section (b);
2. view internationalization settings;
3. view shopping cart;
4. show search page.
   

In the above wireframe in section (a) 5 we have the homepage with all its elements. Unlike other stores, our designed store is able to provide 4 main categories of products in one single place:

• applications - mobile applications for multiple platforms;
• music;
• movies;
• books.

Rows pointed by (6a) represent the most popular items in each category. One thing to note here is the possibility to scroll horizontally each row of each type of item. This thing is visually denoted by the fading of the elements in the fourth column - (7a).

The section (b) of the wireframe offers a printscreen of the grid shown when the speech button 1 from the top is pressed.

When the vocal navigation is enabled it is possible to navigate by specifying the horizontal (b3) and vertical (b2) coordinates. For example if we want to click on App2 we must speak the coordinates B+2.

Intro

Android Market vs. App Store



Android Market is an online software store developed by Google for Android devices. An application program ("app") called "Market" is preinstalled on most Android devices and allows users to browse and download apps published by third-party developers, hosted on Android Market. Users can also search for and read detailed information about apps from the Android Market website.(https://market.android.com/)

The Apple App Store "Tiny Wings" is preinstalled on Apple's iOS (carried on the iPhone, iPod Touch, iPad and Mac), which allows users to browse and download applications from the iTunes Store that were developed with the iOS SDK or Mac SDK and published through Apple. Depending on the application, they are available either for free or at a cost. The applications can be downloaded directly to a target device, or downloaded onto a PC or Mac via iTunes.

(http://store.apple.com/us)