10) Wireframes User Feedback Survey | WEB202 | Students of Premium Design Works

WEB202 » 10) Wireframes User Feedback Survey

User-Centered Design (UCD) is a product development approach that focuses on the end users of a product while adhering to the philosophy that the product should suit the user’s needs. The art and science of UCD comes down to the application of UCD principles by incorporating usability research methodologies into the product design and development lifecycle. The main principles involved in UCD are 1) an early focus on users and their tasks, 2) empirical measurement of product usage and 3) and iterative design process.

How to Focus Early on Users & Tasks

You’ll never believe this, but an easy way to focus early on users and their tasks is to simply ask your user audience for feedback on the designs that you are creating for your products during the wireframe stage. Seriously… it’s black magic.

A simple and effective way to ask for feedback on your product design wireframes is through a series of structured interviews or surveys as they are one of the most common and easiest methods to use to gather requirements and feedback. It is amazing the amount of information one can gather by having a conversation with a user of a product.

What to Measure Empirically

To empirically measure our wireframe design’s ability to allow the user audience to perform their selected tasks, we will then need to conduct a structured user feedback interview and survey to ask our user audience to judge the design of our wireframes according to how well they provide:

Signposts: Features that help users figure out their immediate surroundings. Common signposts include page and window titles, web page logos and other branding devices, tabs, and selection indicators.
Signage: Clear, unambiguous labels that anticipate what you’re looking for and tell you where to go. If signs are where you expect them to be, you’re never left standing at a decision point without guidance.
Visual Hierarchy: Put simply, the most important content should stand out the most, and the least important should stand out the least. Also, titles ought to look like titles, subtitles ought to look like subtitles, and lists ought to look like lists—in other words, a reader should be able to deduce the informational structure of the page from its layout.
Visual Rhythm: Lists, grids, alternating elements such as headlines and summaries, and whitespace separation can create a strong visual rhythm that irresistibly draws the eye and allows users to read the page effectively.

Source: Designing Interfaces, by Jenifer Tidwell

We also need to get user feedback on how our design is shaping up by evaluating our wireframes according to:

Interface Design: Interface components that allow the user to do things such as buttons, form fields, etc. that helps them perform the tasks that they are setting out to do.
Navigation Design: The specialized form of interface design tailored to presenting our unique information and how that information will be able to be found and seen providing the user to actually go places in our site.
Information Design: Overall presentation of our information for effective communication of ideas to the user drawing upon all of the resources that we have laid out thus far.

Source: The Elements of User Experience: User-Centered Design for the Web, by Jesse James Garrett

The Wireframes User Feedback Survey

So, let’s interview some users and ask them some questions about what they think about the design of your wireframes. :-)

1) Scenario: let’s assume that the user you will be talking to, and will be asking for feedback from, will be performing the task of 1) finding a product within your website’s user interface starting from the homepage, 2) once they have found the product, they will add that product into the shopping cart and 3) successfully buy that product using said shopping carrt. It is up to you to designate a product for them to find and buy.

2) Questions: you shall answer the following questions by asking the users for feedback regarding:

Home Page: When landing on the home page…

Are the signposts on the home page, including page and window titles, web page logos and other branding devices, tabs, and selection indicators clear? Why or why not?
Does the signage on the home page, including the spotlight and the features of the page in terms of labels and functionality seem clear and or logical to you? Do they allow you to gage what this site’s products are and why a user may be interested in them? Are there any special promotions that seem useful to you? What special promotions would you expect? Why or why not?
Is the overall visual hierarchy of the home page clear? Meaning, does the most important content stand out the most and the least important stand out the least? Do titles look like titles, subtitles like subtitles, and lists look like lists? Can the user deduce the informational structure of the page from its layout? Why or why not?
Does the design of the home page create a strong visual rhythm that is clear and understandable? Do the groupings of products and or features on this page seem logical and or functional to you? Why or why not? How could they be improved?
Does the home page have a clear interface design? Do the interface components allow the user to potentially view any interesting product information or special promotion successfully? If yes, are they what you would expect and would they actually help you? If no, are any necessary and would any help you? Why or why not?
Does the home page have a clear navigation design? Are the main (global) navigation categories clear and logical? Are the labels understandable? Are they where you expect them to be? Do the utility navigation items and or search features contain the features and functions that you would expect? Are they clustered together appropriately? Are they where you would expect them to be? Are there any navigation items or pieces of functionality that you would expect missing? Why or why not?
Does the home page have a clear information design? Does it give you the pieces of information that you need to make a clear choice in order to potentially view a list of product categories, go directly to a promotion or perform any other task you may be looking to perform? Are there pieces of information missing that you need to complete your task? Why or why not?

Categories & Subcategories Page(s): When navigating to a category or sub-category page…

Are the signposts on the product categories or sub-categories page(s), including page and window titles, web page logos and other branding devices, tabs, and selection indicators clear? Why or why not?
Does the signage on the product categories or sub-categories page(s), including the category or sub-category tiles and options in terms of labels and functionality seem clear and or logical to you? Are they where you would expect to find them? Are they organized how you would expect them to be? Why or why not?
Is the overall visual hierarchy on the product categories or sub-categories page(s) clear? Does the most important content stand out the most and the least important stand out the least? Do titles look like titles, subtitles like subtitles, and lists look like lists? Can the user deduce the informational structure of the page from its layout? Why or why not?
Does the design of the product categories or sub-categories page(s) create a strong visual rhythm that is clear and understandable? Do the groupings of product categories, sub-categories and or features on this page seem logical and or functional to you? Why or why not? How could they be improved?
Does the product categories or sub-categories page(s) have a clear interface design? Do the interface components allow the user to potentially view any interesting product information? If yes, are they what you would expect and would they actually help you? If no, are any necessary and would any help you? Why or why not?
Does the product categories or sub-categories page(s) have a clear navigation design? Does the organization and presentation of the navigation provide the user the means to potentially view a list of products or view another category or sub-category effectively and or show each level of hierarchy leading to the current page? Why or why not?
Does the product categories page have a clear information design? Does it give you the pieces of information that you need to make a clear choice in order to potentially view a list of products? Are there pieces of information missing that you need to complete your task? Why or why not?

Product Listings Page: When navigating to a product listing page…

Are the signposts on the product listings page, including page and window titles, web page logos and other branding devices, tabs, and selection indicators clear? Why or why not?
Does the signage on the product listings page, including the category or sub-category tiles, sorting or filter options and pagination schemas in terms of labels and functionality seem clear and or logical to you? Are they where you would expect to find them? Are they organized how you would expect them to be? Why or why not?
Is the overall visual hierarchy on the product listings page clear? Does the most important content stand out the most and the least important stand out the least? Do titles look like titles, subtitles like subtitles, and lists look like lists? Can the user deduce the informational structure of the page from its layout? Why or why not?
Does the design of the product listings page create a strong visual rhythm that is clear and understandable? Do the groupings of products, listings and or features on this page seem logical and or functional to you? Why or why not?
Does the product listings page have a clear interface design? Do the interface components allow the user to potentially sort or filter product options to help them narrow down the product listings to find their product easier? If yes, are they what you would expect and would they actually help you? How can they be improved? If no, are any necessary and would any help you? Why or why not?
Does the product listings page have a clear navigation design? Does the organization and presentation of the navigation provide the user the means to potentially view an individual product effectively and or show each level of hierarchy leading to the current page? Why or why not?
Does the product listings page have a clear information design? Does it give you the pieces of information that you need to make a clear choice in order to potentially view an individual product? Are there pieces of information missing that you need to complete your task? Why or why not?

Product Details Page: When navigating to a product detail page…

Are the signposts on the product details page, including page and window titles, web page logos and other branding devices, tabs, and selection indicators clear? Why or why not?
Does the signage on the product details page, including the product information, specifications, reviews, etc. in terms of labels and functionality seem clear and or logical to you? Are they where you would expect to find them? Are they organized how you would expect them to be? Why or why not?
Is the overall visual hierarchy on the product details page clear? Does the most important content stand out the most and the least important stand out the least? Do titles look like titles, subtitles like subtitles, and lists look like lists? Can the user deduce the informational structure of the page from its layout? Why or why not?
Does the design of the product details page create a strong visual rhythm that is clear and understandable? Do the groupings of information, features, specifications, etc. on this page seem logical and or functional to you? Why or why not?
Does the product details page have a clear interface design? Do the interface components allow the user to potentially view any and all information to aid in choosing to buy the correct option of the product? Why or why not?
Does the product detail page have a clear navigation design? Does the organization and presentation of the navigation provide the user the means to potentially buy an individual product effectively and or show each level of hierarchy leading to the current page? Why or why not?
Does this product detail page have a clear information design? Does this page give you the pieces of information that you need to make a clear choice in order to buy an individual product ? Are there pieces of information missing that you need to complete your task? Why or why not?

Order Summary Page: When viewing the order summary page…

Are the signposts on the order summary page, including page and window titles, web page logos and other branding devices, tabs, and selection indicators clear? Why or why not?
Does the signage on the order summary page, including the location within the process and how to continue with the process in terms of labels and functionality seem clear and or logical to you? Are they where you would expect to find them? Are they organized how you would expect them to be? Why or why not?
Is the overall visual hierarchy on the order summary page clear? Does the most important content stand out the most and the least important stand out the least? Do titles look like titles, subtitles like subtitles, and lists look like lists? Can the user deduce the informational structure of the page from its layout? Why or why not?
Does the design of the order summary page create a strong visual rhythm that is clear and understandable? Do the groupings of order information and functionality on this page seem logical and or functional to you? Why or why not?
Does the product details page have a clear interface design? Do the interface components allow the user to potentially view and or modify any and all information regarding choosing and buying the correct option and quantities of the product(s)? Why or why not?
Does the order summary page have a clear navigation design? Does the organization and presentation of the navigation provide the user the means to know where they are in the process and potentially buy the product(s) or continue shopping, etc. effectively? Why or why not?
Does the order summary page have a clear information design? Does it give you the pieces of information to reassure you that you are making the correct choice of product(s) in order to continue the process of buying the product(s) via the checkout process?Are there pieces of information missing that you need to complete your task? Why or why not?

Sign-In or Register Page: When continuing to the sign-in or register page…

Are the signposts on the sign-in or register page, including page and window titles, web page logos and other branding devices, tabs, and selection indicators clear? Why or why not?
Does the signage on the sign-in or register page, including how you are to proceed by either signing in or registering, etc. in terms of labels and functionality seem clear and or logical to you? Are they where you would expect to find them? Are they organized how you would expect them to be? Why or why not?
Is the overall visual hierarchy on the sign-in or register page clear? Does the most important content stand out the most and the least important stand out the least? Do titles look like titles, subtitles like subtitles, and lists look like lists? Can the user deduce the informational structure of the page from its layout? Why or why not?
Does the design of the sign-in or register page create a strong visual rhythm that is clear and understandable? Do the groupings of sign-in or register information and functionality on this page seem logical and or functional to you? Why or why not?
Does the sign-in or register page have a clear interface design? Do the interface components allow the user to actually sign-in, retrieve a forgotten password, register and or create a new account, check-out as guest, etc.? Why or why not?
Does the sign-in or register page have a clear navigation design? Does the organization and presentation of the navigation provide the user the means to potentially sign-in, retrieve a forgotten password, register and or create a new account, check-out as guest, etc.? Why or why not?
Does the sign-in or register page have a clear information design? Does give you the pieces of information that you need to make a clear choice in order to eithersign-in, retrieve a forgotten password, register and or create a new account, check-out as guest, or allow you to choose another option that you would like to choose, etc.? Are there pieces of information missing that you need to complete your task? Why or why not?

Order Information & Review Page(s): When continuing to the order information and review page(s)…

Are the signposts on the order information and review page(s), including page and window titles, web page logos and other branding devices, tabs, and selection indicators clear? Why or why not?
Does the signage on the order information and review page(s), including the shipping and billing addresses, payment methods and shipping options, etc. in terms of labels and functionality seem clear and or logical to you? Are they where you would expect to find them? Are they organized how you would expect them to be? Why or why not?
Is the overall visual hierarchy on the order information and review page(s) clear? Does the most important content stand out the most and the least important stand out the least? Do titles look like titles, subtitles like subtitles, and lists look like lists? Can the user deduce the informational structure of the page from its layout? Why or why not?
Does the design of the order information and review page(s) create a strong visual rhythm that is clear and understandable? Do the groupings of shipping, billing, order, payment and review information and or features on this page seem logical and or functional to you? Why or why not?
Does the order information and review page(s) have a clear interface design? Do the interface components allow the user to potentially confirm and place their order or edit it if need be? Why or why not?
Does the order information and review page(s) have a clear navigation design? Does the organization and presentation of the navigation provide the user the means to confirm and place their order or edit it if need be? Why or why not?
Does the order information and review page(s) have a clear information design? Does give you the pieces of information that you need to actually confirm and place your order? Are there pieces of information missing that you need to complete the confirm and place their order task? Why or why not?

Order Confirmation Page: When continuing to the order confirmation page…

Are the signposts on the order confirmation page, including page and window titles, web page logos and other branding devices, tabs, and selection indicators clear? Why or why not?
Does the signage on the order confirmation page, including the product, billing, shipping and tracking information in terms of labels and functionality seem clear and or logical to you? Are they where you would expect to find them? Are they organized how you would expect them to be? Why or why not?
Is the overall visual hierarchy on the order confirmation page clear? Does the most important content stand out the most and the least important stand out the least? Do titles look like titles, subtitles like subtitles, and lists look like lists? Can the user deduce the informational structure of the page from its layout? Why or why not?
Does the design of the order confirmation page create a strong visual rhythm that is clear and understandable? Do the groupings of shipping, billing, order, payment, tracking and confirmation information and or features on this page seem logical and or functional to you? Why or why not?
Does the order confirmation page have a clear information design? Does give you the pieces of information that you need to confirm what you ordered, who it was billed to, where it was shipped, how to track it, etc.? Are there pieces of information missing that you need to feel like your task has been confirmed sucessfully? Why or why not?

Requirements:

Each student should print this Wireframes User Feedback Survey page out (if I haven’t done it for you already) to complete this assignment. You will also need to print out copies of your Home, Category and Product Page(s) Wireframes & Shopping Cart (Forms) Wireframes assignments to present to the participants and make notations on.
You are required to attend class according to the class Schedule (Spring) or Schedule (Summer) to use your fellow classmates as participants in this survey. You will need to conduct [not sure about quantity yet] interviews where you will ask the participant the questions on this survey and take notes on their answers in the space provided for you. You will also need to be a participant in [not sure about quantity yet] student’s interview surveys.
Once you have completed the interview surveys, please turn in copies of 1) this survey with your written answers and 2) the wireframes with notations as your Wireframes User Feedback Survey assignment according to the class Schedule (Spring) or Schedule (Summer).