recommendation function is good or not Showing the quantity sold +By seeing the quantity sold, people can
identify the most popular products.
+When people do not have much time, this information can be the first criterion that attracts them.
-In the limited space on the screen, too many words may lead to overcrowding.
Animation when an item is added to the shopping cart
+Due to the limited screen size, some information may be omitted while scrolling up and down. The animation reminds people what they have added.
PayPal +Users do not have to register on the website but can use their PayPal account instead.
+Users do not have to enter their password when checking out.
+This method has more credibility so that consumers feel safer.
-In Taiwan, due to legal rules and laws, this method cannot be applied at present.
Provide a model, video, or 360 degree rotation for browsing the product
+Users gain a detailed understanding of the products by seeing pictures and watching videos.
+Users do not have to read so many words at a time on a small screen.
Browsing or shopping records + Provides a convenient way for users to recall their visited items again.
Developing information and interaction scenarios
As mentioned in chapter three, information design and interaction design are conducted in the same session of focus group. Hence, in the round three, participants were asked not only to read two activity scenarios and claims, but also to share about
‧
website. Table 4.11 and Table 4.12 showed metaphors and ITs, which can be applied to brainstorm our further design.Table 4.11 Metaphors and relative interface information and interaction M-commerce interface
information or interaction
Real-world metaphor Ideas about M-commerce information or interaction design.
Floating window Projector screen Pull the screen up and down to use.
Uwant Wall DM of department store Show products in a specific shape (e.g., rectangle) block by block.
Breadcrumb A waymark Lead users through the navigation and show their search path.
Stock status Traffic light (Red: stop
Yellow: about to stop, but can still pass through Green: pass through)
Red: out of stock.
Yellow: products will be available soon.
Green: in stock.
Sliding pictures left and right
A quick browse of a book Flip through the pages of books (left or right).
Tab panel 3M Bookmark sticker Easily find the bookmarked pages.
The category menu spreads upward
Slide phone Slide open the cell phone to use the hidden
keyboard and screen.
‧
Table 4.12 ITs and relative interface information and interaction M-commerce interface
Uwant Wall Pinterest, or Google pictures
The effects when clicking pictures, such as pop up, zoom in and zoom out.
Breadcrumb Folder path Show the complete search path of the product.
Tab panel Tab panel in the homepage of Yahoo
Only when the widgets are triggered will the relative information be displayed.
The category menu spreads upward
Chat room in Facebook The window moves up when users begin to chat with others.
As shown in table 4.13, except two information and interaction scenarios, several pictures, which exactly illustrated the appearance of the e-commerce website, were inserted into the text appropriately for enhancing the understanding of the scenarios.
These pictures represented the website interface in detail including what the website looks like and how to operate the website. Besides, claim analysis was conducted to display the pros and cons of proposed features in scenarios at the same time. Table 4.14 showed the claim analysis of information and interaction design.
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
Table 4.13 Information and interaction scenarios
Information and Interaction Scenario 1:
Figure 4.1 & 4.2 Homepage and functional menu
(Figure 4.1 & 4.2) Thomas remembered that he needed a mouse for his computer when taking the bus. Thomas took out his smartphone and browsed website A to find a suitable mouse. At first, Thomas found the webpage of the mobile version matched the small screen. Thomas was ready to shop for a while, because he had another half hour left before he would arrive at his destination. On the homepage, the upper left area was the website logo and at the upper right were two buttons, the “classical version” and the “user profile.” Thomas was curious about the user profile and so clicked the button. He found that a page popped up in a
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
floating window rather than a new webpage. It was easy and clear for Thomas, because there were some integrated functions in the list, including logging onto the website, checking out the shopping list, ad looking at a tracking (wish) list, recently browsed items, and previous transaction records.
Under the logo, there was a bar called “APP Limited Time Download.” Thomas preferred this design rather than a button leading him to the downloading page directly. Thomas was curious about the “Limited Time Download,” so he clicked the link and soon understood that a special discount was provided within 24 hours of downloading the app. However, he was not interested in the app, and did not want to waste disk storage.
Figure 4.3 & 4.4 Uwant Wall
(Figure 4.3 & 4.4) Thomas went back to the previous page and found three
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
Uwant Wall and first clicked this button. He saw four pictures on a page and two pictures in a row. Thomas used his finger to scroll up and down to click the celebrities that he liked. The page showed another floating window with several products that he could browse by sliding left and right, just like the style of the
“Pinterest” website. Along with the pictures, Thomas also saw the product name, price, and a heart motif under the picture. If Thomas was interested in one of the items, he could click the picture and browse the detailed information on a new product webpage. Thomas thought that these designs were pretty good. He clicked the “X” button to the upper right of the floating window and went back to the homepage.
Figure 4.5 & 4.6 Two pull-down menu (“All-department” & “Sorting”) (Figure 4.5 & Figure 4.6)Thomas was ready to find the mouse on the website
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
and “Today’s Deal.” There was a pull-down menu called “All departments” next to the search bar. Thomas could select all kinds of products and some specific classifications to filter the search results. After clicking the search button, the place of logo, “PC,” “functional list,” and the search bar were still in the same fixed place.
Beneath those fixed objects, there were two types of pull-down menus: “advanced search” and “sorting.” Before browsing the products, Thomas clicked the sorting pull-down menu and tried to sort the results by price. It was convenient for Thomas because he did not have to work out the price comparison by himself. Also, the two pull-down menus were presented in floating windows. If Thomas did not want to use the window, he could click the “X” button to close it.
Figure 4.7 Search result
(Figure 4.7) After clicking the pull-down menu, Thomas browsed the search
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
down to browse these items. For each item, there was a picture on the left and two rows on the right. The product name and the favorite design (stars) were shown in the first row, and the price and a heart button were in the second row. If Thomas intended to buy the product, he could press the button directly to add this item to the shopping cart. There were several icons that represented different methods of payment, such as IBON, credit card, and PayPal. The stock status of each item was presented in the form of a traffic light. For example, a green light icon indicated that stock was available, a red light icon meant that no stock was available and that the stock could not be replenished. A yellow light icon indicated that no stock was available, but that the stock could be replenished in two days.
Thomas was ready to select several items on this page and add them to the shopping cart. When he clicked the “heart” button, an animation “+1” was shown to the upper right of the page. This reminded Thomas that he had already added an item successfully.
After Thomas had finished browsing the page and adding some mouse devices to the shopping cart, he wanted to browse the detailed information on the first item in the list. Hence he clicked the button “↑” to go back to the top and selected the first item.
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
Figure 4.8 & 4.9 Product information (Part I)
(Figure 4.8 & 4.9) Thomas found that the webpage showed a “breadcrumb”
that indicated the location of the item in the category map, and a brand discount was shown under the breadcrumb. However, Thomas wasn’t interested in the promotion, and continued browsing the detailed information on this item.
Thomas saw a picture that could be rotated 360 degrees. Next to the picture were the item name and a brief description. If Thomas did not want to browse the page, he could click the “buy now” or “add to shopping cart” buttons directly.
Furthermore, he could share this product with his friends by clicking the Facebook or Google Plus icons. Thomas scrolled down the page to look for the detailed information.
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
“Picture,” he found that it showed some product pictures that could be slid left and right. The page did not give detailed information about the mouse until Thomas clicked the “Detailed Info” label. Thomas did not spend too much time scrolling up and down. Finally, he decided on the best mouse, so clicked “buy now” instead of
“add to shopping cart.”
Figure 4.10 & 4.11 Check list and payment method
(Figure 4.10 & 4.11) After clicking “buy now,” the shopping cart page was displayed. He clearly saw the selected items in the cart. He could also delete one of the items or move an item onto the tracking list. The page also showed the total amount and products recommended by other people. However, Thomas was not interested in these items, and scrolled down a little and clicked the “OK” button to
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
After clicking the “OK” button, Thomas was ready to select his preferred method of payment. There were three bars presented side by side: IBON, credit card, and PayPal. Due to the hassle of taking out his credit card to enter the password and going to pay the bill at a convenience store, Thomas clicked the
“PayPal” button and logged into the website. The website automatically showed his ID, credit card number, and address. Thomas checked the information quickly and clicked the “Finish” button.
Information and Interaction Scenario 2:
Figure 4.12 Hot product
(Figure 4.12) Emily made an appointment with Thomas to discuss their cooperation at work in a coffee shop. Emily arrived there about half an hour early.
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
she took out her new HTC ONE to browse the website to receive the instant promotion news. It seemed that the website had been updated, so Emily decided to browse it in the remaining time. Emily first clicked the “HOT” button, and the new webpage showed some bars that included pictures of a particular classification in the bar. In each bar, Emily could slide the pictures left and right or click on a picture if she was interested in the product. After she clicked a picture, a small bar would pop up showing the product name, price, and a “heart” button. Emily quickly browsed these items and clicked the “heart” button to add two or three items to the shopping cart. Emily still had some time left, so she decided to continue browsing the website while waiting for Thomas. She went back to the previous page.
Figure 4.13 Category
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
(Figure 4.13) Not knowing what to buy, at first Emily browsed the categories to find particular products on the homepage, for example, purses, clothes, or necklaces.
The category button was located at the bottom of the page rather than at the top.
Emily clicked the button and found that it was a collapse window. In this window, general categories were presented requiring two or three clicks to find out what she needed. Emily could also use the search bar and a pull-down menu, called “All departments,” to search for products.
Figure 4.14 & 4.15 Product information (Part II)
(Figure 4.14 & 4.15) While browsing the search results, Emily found that there was additional information on particular products. For example, when she looked at clothes, the widget not only showed a model but also the model’s body
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
her or not. Some of the pictures of the products could be rotated 360 degrees at the start of the page. This function helped her to see the overall look of the product.
There was also a video to introduce the product. This kind of information made Emily feel that she understood the product much more clearly. Emily could click the label in the tab panel to select the type of information that she wanted to browse.
In addition to the items that she had already added to the shopping cart, Emily found some grouped products. Because she wanted to discuss the products with her friends, Emily clicked the functional menu to the upper right of the webpage, logged into the website, entered her ID and password, checked the group buying products saved in her shopping list, and finally clicked the “X” button at the upper right of the window. Emily clicked the “FB” and “G+” buttons to share the information with her friends on the two social websites. After sharing the information, she saw Thomas coming. She checked her shopping list again, and prepared herself to talk to Thomas.
At nine o’clock that evening at home, Emily remembered that she needed to check the shopping list again. This way, she could figure out easily if any product was wrong for her. Emily moved some items onto the tracking list and kept some items in the cart to check out. After paying the bill quickly and closing the website, Emily continued to deal with her work and to discuss the group buying products at the same time.
‧
Table 4.14 Claim analysis of information and interaction scenario Features Pros and cons
Floating window + Clicking a button or a link does not open a new page, so time is not wasted on page loading.
+ Users can close the floating window directly and intuitively without it affecting the original webpage.
Functional menu + Several popular functions are listed on the same menu (e.g., shopping cart, login, tracking list, etc.)
Two pictures per row (Uwant Wall)
+ Due to the limitation of screen size, this type of display makes pictures easier to browse.
+ People can see the pictures more clearly and click them more easily.
Pull-down menu (all departments)
+ Inappropriate products can be filtered out in advance.
+ The search function can be used directly from the pull-down menu instead of going to a category.
Showing search result in 10 items per page
+ The list of search results does not need too much scrolling.
A “heart” button in search result webpage
+ Users can add products to the shopping cart directly and intuitively.
Showing the search path (breadcrumb)
+ Users have a clear picture of the category to which the current product belongs.
Tab panel + The information does not take up a lot of space on the webpage.
+ Users click the widget to see specific information rather than scrolling up and down.
Showing stock status by using the traffic light metaphor (red, yellow, green)
+ Lets users know about the stock status quickly and intuitively.
Browsing pictures by sliding right and left
+ The webpage content is not too long.
Accessibility of the
“checkout” and “buy now” buttons
+ Users can buy an item quickly by clicking these buttons without needing to see all the information.
+Users can easily skip extra information and save time.
Listing the categories in popular order
+ Users do not need to browser too much to find popular items.
Finding the right + With a limited screen size, too many category layers
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
classification within two or three clicks.
appear messy.