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)