Friday, June 10, 2011

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.













Wednesday, June 8, 2011

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



T
his 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.