Guide to Creating a Products' User Interface

ex) DataProtect

1. Request MRD
   Seek out a Marketing Requirements Document (MRD) or any existing requirements documentation. How do I get an MRD?
   
2. When Redesigning, Review Current Product
   If you are redesigning an existing product, spend some time reviewing existing product to discover everything the product can do.
3. Discuss Product with PM
   Speak with the Product Manager (PM), in this case John Manganaro, to learn more about the product. Email the PM, if time is a factor, to request the MRD for the product
4. Gather Customer Feedback
   Speak with customer support, email them (George Koch & Shafeed Karadsheh) if time is a factor, to gather user feedback regarding what users like and don’t like about the product, which items customers find confusing, and which new features customers may be seeking
5. Research Competition
   Exploring competitor web sites offers the opportunity to discover what is commonly being offered as well is what is working well for them. We have quite a few competitor accounts which can be viewed. Contact Stu Young for access.

• Review the MRD prior to meeting with group
  Reviewing this document will help to better understand both the product as well as the target audience.
  
• Review Customer Feedback prior to meeting with group
  
• Create List of questions to ask in group meeting
• Meet as a group to discuss product
  Meet with Product Managers, Project Managers, UI designers, front-end developers, back end developers, and any key stakeholders to ensure everyone is on the same page and that any concerns are addressed. Have a list of the requirements in front of you to be sure that you’ve addressed everything.
  
  In this case we met with members of UI team, SCNG, and HPS.
  

• Speak with Customers
  Schedule time to speak with actual customer. You will never know if a product is successful unless you speak with actually customers who use the application. Ask them what their needs are, what their issues are with current products and, what they currently like regarding certain products.
  
  In our case we did not have time to speak with actual users, but we were able to do the next best things which include:
  • Reviewing stakeholder interviews
  • Reviewing Customer Support feedback
  • Reviewing online survey results
• Conduct Focus Group
  Again if time permits, meet with a group of users in a focus group to see at a high level what users want in a web hosting company. A focus group is an informal assembly of users whose opinions are requested about a specific topic. The goal is to elicit perceptions, feelings, attitudes, and ideas of participants about the topic.
• Create Online Surveys
  We created an online survey before we began working on the UI (view results). Username: eugene.sung@hostway.com Password: 123abc

• Review and analyze meeting notes, online survey results, user research, customer support feedback, company wide Pain Points, as MRD
• Review and analyze existing product again
• Brainstorm using paper
  It is not a good ideas to begin brainstorming using the computer until you have drawn out some ideas on paper. This will help you come up with good ideas and help you weed out the bad ideas.

• Determine where the product fits inside the application's navigation
  Before you even begin creating a process flow for a product, you must know where in the application that product will exist. In this case, DataProtect will go under PC Backup & Utilities. While our NG global site map (NG_global_sitemap_12_22_06_v8.pdf) is not 100% u pto date, we do have one which we attempt to update as often as possible.
• Create a process flow for each product
  When a user visits your application they expect to flow between pages and dialogs to accomplish their task. By creating and reviewing a process flow, you can visually see the steps a user will have to go through. Then you can determine where the process can be optimized.
  
  Since this is a relatively standard process, I did not create a process flow. If I had created a process flow, I would utilize Microsoft Visio and work off a template I created. I can provide the template if needed.
• Create Site Maps
  For each top level of site navigation (email, domain names, business center, etc a site map (Exchange_sitemap_12_27_06_v3.pdf) has been created. Site maps are also created for more complex products such as MS Exchange or Domain name transfers.
• Note items which need to be addressed
  Note, in the wireframes and/or HTML index page, any items which need to be addressed or may be a concern. In the case of DataProtect it should be noted that there are different plans: personal and business
• List all pages which need to be built
  Use both process flows and site maps to help decide which pages and/or page types need to be wireframed. This will also help ensure the navigation is move usable. This list should also include what data will need to be presented as well as what actions the user can perform.
  
  There are standard flows which always occurs for the following:
  Creation of product and Managing a product after it has been provisioned.
  
  Creation Steps & Management Steps:
• Perform a final review of all research to ensure all requirements are met
  Again this includes meeting notes, online survey results, user research, customer support feedback, and company Pain Points, to make sure all requirements have been met

1. Think about which product works the most similarly to the product you will be working on
   In this case Sharepoint and Exchange are wireframes to use as a starting point. This means that I will open up one set of wireframes (share point) and save it as: Product Action date_verison#.vsd
   
   ex) DataProtect Purchase 1_23_07_v1.vsd and DataProtect Manage 1_23_07_v1.vsd
   
2. Decide what is going to go on each page
   Have a basic inventory of the content that needs to appear in each page or page type. This will tell you what you need to include in each wireframe of a page.
3. Add Details
   • Display page items as you'd like them to display on the page
   • Label all elements
   • Add your content
4. Layout wire frames pages using placeholders
5. Annotate Wireframe
   Annotations or notes help describe things that can’t be easily communicated such as needs that must be addressed during visual design or guidelines for what type of content can be used in a particular position. When you add annotations, there are few things that can be useful:
   • Write up the page scenario (How did the users get there?)
   • Use numbers and titles to define areas you are referring to
   • Use URL's of example HTML code for developers to refer to.
   • Define and describe interaction sequences such as the default state, error state, and any nonstandard interactions (javascript, AJAX). You need to show the complete sequence. You will also need to define how to return to the default state. You will also have to create a wire frame for the user who does not have javascript enabled.
6. Utilize the HTML and CSS catalog which was created to allow both UI designers and developers a means to demonstrate how both application components as well as actual pages will look in HTML. This catalog is broken up into 2 sections:
   1. Application Components -snippets of code
   2. Product Listing - actual sections of the application
      
      For example, since I wish to keep the application consistent, I realize that I will, after a few hours of working in a sample HTML code, that this html page table #16d is the same to work off of. It will now look similar to this.
7. Create an HTML example for each unique looking page for each product.
   All of the unique pages are listed and categorized in a page called index.html and placed in the directory in Linigma, an internal server, which matches the directory structure of the site's navigation.
   
   ex) dataprotect index page
   placed in the directories, pc_backup_utlities > backup > dataprotect > index.html
8. Post each complete wireframe to the wiki
   Once each Visio wireframe has been completed, created a PDF of it, since many of the developers use Linux and will be unable to open Visio documents, and then I post it on Wiki under UserInterface.
9. Inform at teams that the wireframe has been posted
   We are working on a means to do this.

• Adhere to Coding Standards
  Keep in mind since we are creating an application which will be utilized in multiple languages, we have incorporated minimal use of graphics. Much of the look and feel is created by using semantic based HTML markup and standards based design. CSS along with the minimal graphics is what gives the application it's look and feel.
• Maintain proper HTML structure is based on logic, order, and using semantically correct markup.
  If you have a heading use the heading element, beginning with the H1 element. If you have a paragraph, use a paragraph element. If you have a list, use a list item element. If you’re quoting a few lines, use a block quote element. Those elements provide meaning to the content, making them semantically correct, in addition to being solid HTML structure.
• Begin the HTML creation process by working off the basic template HTML shell
• Add cSS once the HTML standards are in place
  Start with good HTML structure and then add the CSS, preferably with an external style sheet, for the visual presentation that you have in mind.
• Comment all CSS and HTML Code
• Utilize, update, and maintain the HTML and CSS catalog

1. Pre Test Planning (more to come)
2. Recruit Users
3. Run Pilot Test
4. Conduct Usability Test
5. Post-test Analysis

• Post PDF version of wire frame to the UI Wiki
  After a set of wire frames are completed, they should be converted into a PDF and then posted to the Wiki under the UserInterfaces section. The developers (SCNG team) can view these documents at any time.
  
  Once the developers have reviewed these documents the will be sure to have a few questions or perhaps a few new discoveries will come up. Discuss these items to figure out the best solution.

• Revise the wireframes
  After all the feedback has been gathered, you will have to following the make edits to any of the following documents:
  • process flows
  • site map
  • wire frames
  • html
  • css
• Post PDF version of wire frame to the UI Wiki
  Once the wireframes for each product have been completed, they should be converted into a PDF and then posted to the Wiki under the UserInterfaces section

• Review Completed JSP
  Once the developers have completed the jsp pages, they will posted to a staging server. Make sure everything works they way is was wire framed to work
• File Bugs
  When you notice items are not working as they were wire framed to work, then file bugs where necessary.
• Alter CSS
• Make necessary corrections to:
  • process flows
  • site map
  • wire frames
  • html
  • css
• Evaluate using Heuristic Evaluations
  Heuristic evaluation is a discount usability engineering method for quick, cheap, and easy evaluation of a user interface design. Heuristic evaluation is the most popular of the usability inspection methods.
  
  The goal of heuristic evaluation is to find the usability problems in the design so that they can be attended to as part of an iterative design process. Heuristic evaluation involves having a small set of evaluators examine the interface and judge its compliance with recognized usability principles (the "heuristics").
  
  1. Visibility of System Status
     Always keep user informed about what is going on, through appropriate feedback within reasonable time.
  2. Match Between System and the Real World
     Speak the user’s language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.
  3. User Control and Freedom
     Users should be free to select and sequence tasks (when appropriate), rather than having the system do this for them. Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go through an extended dialogue. Users should make their own decisions (with clear information) regarding the costs of exiting current work. The system should support undo and redo. 
  4. Consistency and Standards
     Follow convertions to ensure Users don't have to to wonder whether different words, situations, or actions mean the same thing.
  5. Help Users Recognize, Diagnose, and Recover From Errors
     Express Error messages in plain language (NO CODES)
  6. Error Prevention
     Careful desin to prevent errors occuring. This is even better than good error messages.
  7. Recognition Rather Than Recall
     Make objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.
  8. Flexibility and Minimalist Design
     Accelerators-unseen by the novice user-may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions. Provide alternative means of access and operation for users who differ from the "average" user (e.g., physical or cognitive ability, culture, language, etc.
  9. Aesthetic and Minimalist Design
     Eliminate irrelevant or rarely needed information which is since every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility
  10. Help and Documentation
      Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user’s task, list concrete steps to be carried out, and not be too large
  11. Skills
      Ensure the application supports, extends, supplements, or enhances the user’s skills, background knowledge, and expertise ----not replace them
  12. Pleasurable and Respectful Interaction with the User
      The user’s interactions with the system should enhance the quality of her or his work-life. The user should be treated with respect. The design should be aesthetically pleasing- with artistic as well as functional value.
  13. Privacy
      Help the user to protect personal or private information- belonging to the user or the his/her clients
• Test application for Accessibility
• Validate JSP/HTML pages in various browswer
  We are primarily supporting the Grade A browsers as it emphasizes various UI design patterns we've embraced (progressive enhancement, unobtrusive javascript, etc). learn more
• Validate CSS