T/TAC Project Site
Fall 2003 - Group 1

 


Page Design Issues for T/TAC Online (as of 11/3/03)

Be sure to print this in landscape mode.


ID Source Link <Title> Top Heading or Group of Pages Issue                         Recommendation  
53     Site in general The overall color selection for the interface is too contrasty, almost garish. It competes with the content for the users attention. Color selection needs to be changed to reflect a degree of visual and color harmony. The current interface is contains too many contrasty elements and there is no sense of visual hierarchy to the elements. It's as if they are all of the same importance to the user and that is just not true.
52     Site in general The navigation to the left shares almost the same contrast ratio of text color to background color as the content area of the screen, making it hard for a sighted person to distinguish what is important. The color selection needs to be changed so that the category selection menu doesn't compete with the main content area
51      Site in general There is a lack of Visual organization to the T/TAC Online interface. There are far too many navigation areas that compete with one another, and the overall layout and color scheme does not visually aid the user in understanding the interface. This causes the user to scan the page multiple times just to find instructions - which they should never have to do. The visual organization needs to be corrected so that the users is visually guided through the interface and gets a real sense of what's important to pay attention to. This arrangement can also benefit the visually impaired user as is should clarify some of the on-page navigation issues.
24     Many of the pages Users can't tell how many characters are required or allowed or entry into text boxes, but they are warned that they haven't completed the fields when they enter less than 5 characters. Change the error message that tells users that they need to enter all required fields should also say that the fields require 5 to 255 characters.
23 Many of the pages Exit buttons are most often used for leaving an application. Users might wonder if they Exit buttons will take them out of the T/TAC site &/or the webshop creation process. Change Exit to Cancel on all button labels.
26 Many of the pages It's not always clear which fields are required. All required fields everywhere should be marked with an asterisk. This has become a common convention on the web and it's one that takes up little space.
30 Templates for constructing pages Some templates have only a single line text box for the Alt text, caption, and source, such as the template titled "one graphic template," but others like the template titled "two-graphics-template" have multiple lines for the same type of text. Two lines for these everywhere should be sufficient. If there's room on the pages when they have two lines for these entries, add the Why text right on the page instead of forcing user to click for it. This requires we examine the wording for the Why links first.
19 Templates for constructing pages "Help" and "Why" links are broken on every page where they appear. Fix the links.
20 Templates for constructing pages If you leave a template page (for example, to check the Why or Help links) the data entered disappears from the browse box, but not from the other boxes. User entered data should not disappear. Preserve user entered data for browsed entries as well as typed entries when user leaves a page.
21 Templates for constructing pages If you leave the a template page and try to go back, you get 404 error messages, i.e., page not found. The data should be available to users if they want to go back. Preserve user entered data for browsed entries as well as typed entries when user leaves a page.
25 Templates for constructing pages There's no text anywhere explaining the purpose of the Caption field. Include a Why link for this field too.
27 Templates for constructing pages There is no indication of which fields are required. Required items need to be marked with an asterisk & instructions on the top of the page indicating what the asterisk means should be included. Alt text should be required, Caption and Source should probably not be required.
29 Templates for constructing pages Some templates tell you how large to make graphics, such as the template titled "one graphic template," but others don't like the template titled "two-graphics-template." Make sure every template includes the text: "NOTE: Graphics or images must be a maximum size of 400 pixels by 400 pixels."
31 Templates for constructing pages There's incorrect grammar in the error message: "insert required information before proceed!" and it doesn't tell users which is required. This is often the result of entering less than five characters in a field. Change the message to read: "Please enter information in all fields marked with an asterisk. All entries must be between 5 and 255 characters." This is another reason to mark all required fields consistently with an asterisk.
32 Templates for constructing pages Many staff will have to repurpose content originally saved in PowerPoint presentations. It's can very time consuming to find the original graphics that made up the presentations. Webshop creation could be much more efficient for staff repurposing PowerPoint presentations if they had the option to copy & paste their graphics into the templates. Investigate whether it would be possible to copy & paste graphics directly into templates.
57 Templates for constructing pages It would be far more helpful to the users of the templates to give them the ability to visually place and arrange the graphic and text boxes on the screen. At the very least, the application should be able to give the user a preview of what the screen looks like with the graphics and text in place. Visual editing is a part of almost every graphics and presentation tool in regular use today. If this is not possible, then there has to be a way to preview what the page will look like at the time of creation so that the user has the opportunity to make aesthetic decisions. This reduces the users' frustration caused by having to wait until publication to see the page, and having to go through so many steps to delete the page and then recreate it because no editing is available.
58 Templates for constructing pages I have many doubts about having a button the has a small paragraph beside it asking the user take a survey about the experience of creating a webshop. The results won't be accurate. The reason is that the opinion will change as the users experience level changes. This type of survey is still best done one on one and in person, sitting down with the system. I think that this button needs to be eliminated. To really get good results, I believe that surveys have to be specifically targeted and actively followed up in person.
28 Templates for constructing pages The Finish Module button should not lead users to the same pages as the button labeled Add Another Page. Change the name of this button to Save Module or Save Pages. Send users to the Publish Module page when they click on what was the Finish Module button. Provide a message on the top if that page stating that their Module or pages have been saved.
2 Online Training Online Training Online Training > Webshops Not all users will want to see the Create Webshop Instructions every time they create a webshop. Frequent webshop creators will be more efficient if they can bypass the instructions. Change the target of the" Add a Webshop" button to Webshop Profile page. Add a 3rd button after My Webshops that is labeled "Introduction to Webshops."
54 Add a Webshop Create Webshop Directions Webshop Development <Create Webshop Directions> While the graphic metaphor works at some level, the graphics are clumsily portrayed, and suffer form what appear to be JPEG compression artifacts. The graphics portraying the metaphor need to be professionally produced so that the users feel they are using "real" software and not something that "might not work" because it may appear less than professionally produced.
4 Add a Webshop Create Webshop Directions Webshop Development <Create Webshop Directions> The word "Chapters" used here could be confusing since webshops don't have Chapters. Change "Chapter" to "Module."
56 Add a Webshop Create Webshop Directions Webshop Development <Create Webshop Directions> The whole "grid" approach used in organizing the explanations of the icons, is visually "harsh" and could benefit from a better layout.
55 Add a Webshop Create Webshop Directions Webshop Development <Create Webshop Directions> There could possibly be a better metaphor to use for this. Perhaps something more in line with the client population's day to day presentation experience. This metaphor needs to be developed further.
5 Add a Webshop Create Webshop Directions Webshop Development <Create Webshop Directions> There are no bookshelves in this web site. Remove the last row in the table mentioning bookshelves.
3 Add a Webshop Create Webshop Directions Webshop Development <Create Webshop Directions> This page has needs a top level heading to identify its content to users. This page has needs a top level h1 heading to identify its content to users under the blue banner: "Introduction to Webshops."
7 Add a Webshop Create Webshop Directions Webshop Development <Create Webshop Directions> The button label "Continue" is to vague. Change the label to Create a Webshop.
6 Add a Webshop Create Webshop Directions Webshop Development <Create Webshop Directions> The title of the page, Create Webshop Instructions, is inaccurate; there are no instructions. Change the title to Introduction to Webshops.
11 Continue Webshop Profile Webshop Development - Webshop Profile The first button should always be the most frequently clicked button, especially when you might have disabled users. Change first button from Exit, to Continue.
14 Continue Webshop Profile Webshop Development - Webshop Profile The punctuation in incorrect on the error messages: "Please Select a Category" It's using title caps instead of sentence casing & it needs a period. The error message should also explain why this important to the user. Change the error message to read: "Please select a category within which your webshop should be found on this site."
8 Continue Webshop Profile Webshop Development - Webshop Profile There is no where to "Choose one background color for all the pages of your Webshop." Remove that text from the page.
10 Continue Webshop Profile Webshop Development - Webshop Profile Users can't tell why there are optional categories. In the same area where the background color text is removed, add this text: "If you would like your webshop to be listed under two categories, select an optional category."
12 Continue Webshop Profile Webshop Development - Webshop Profile This is the point where the user starts to get lost. They need feedback as to what they have just done and where they are going. The options offered are "Continue" and "Exit". Continue means move to the next step, but the user isn't sure what the next step is at this point. Then there is the question Exit What One option would be to clearly state the Steps to Create a Webshop on the main page. (Step One: Name Your Webshop, Step Two: Create Your Pages) Then name the pages accordingly, so this page would be Step One: Identify Your Webshop. Then at the end of this page, the feedback would be: You have completed Step One. Then offer options: Go on to Step Two, Save and Hold, Exit T/TAC Online, etc.
15 Continue Module_creation Webshop Development - Module Profile The punctuation for the error message: "Do not choose title less than 5 character" is incorrect. Is needs an 's' after character & a period & less awkward wording. Change the message to: The module title must be at least five characters long."
16 Continue Module_creation Webshop Development - Module Profile Users will have a much better idea of how long their webshops will last after they have added all the pages, than before they create any content. Remove the prompt and text box for the Estimated Time, and the text on the left describing it. Add this instead to the page where users publish their modules. The time frame should also read "Approximately 10 to 30 minutes long."
17 Use Templates Webshop Development Webshop Development - Create Module Pages The top level heading is misleading. You don't create module pages here, you select a template, as the previous button, "Use Templates" suggests. Change the "Create Module Pages" to "Select Page Template."
22 image: 1st template graphic two-graphics-template Webshop Development <two-graphics-template>
47 image: 2nd template graphic image: one graphic template Webshop Development <image: one graphic template> There are two areas for adding images. The first one is adding a primary image, and the second one for adding an optional image. If the user decided not to add an optional image, a blank box will appear in the published page. The user may not want to use the single graphic template because that displays the graphic much larger on the page. Have a check box above the optional image area that removes any boxes if the user decides to not use the optional image and display only one small image in the current page.
34 Finish Module save module Webshop Development - Publish Module The button label Save and Publish is confusing. Change the button's label to Publish and the text next to it accordingly.
35 Finish Module save module Webshop Development - Publish Module There needs to be another button so users know how to get off this page, but still get to the rest of the site. Add a button labeled: "Return to T/TAC Online Staff Area."
33 Finish Module save module Webshop Development - Publish Module There is no need for a Save and Hold button. Eliminate the Save and Hold button. Add text before the buttons: Your webshop have been successfully saved on this site. If you wish for others to see it, you must publish it. You can publish it now or return at a later time to publish it." Provide an alternative page that is displayed if the save is not successful.
37 Feedback Form Feedback Webshop [Development] Feedback This page has the same <title> and top heading as the page for providing feedback after viewing a webshop. Change the <title> and top heading to "Webshop Development Feedback."
36 Feedback Form Feedback Webshop [Development] Feedback You can't complete more than two questions because the previous radio button selection disappears when you make a new one. Link the page to the database back end and fix the radio buttons.
38 My Webshops staff: My Webshops Online Training > Webshops > immersion How does user tell on this page which webshops have been published and which haven't. The user can't tell for sure what will happen when they click Edit/Publish; they may wonder if it publish something they may have wished to edit first. Provide 3 separate buttons instead of 2 for each webshop: Edit, Publish, & Delete. If a webshop is already published, gray-out the label on the Publish button. If that is not technically feasible, place the Publish button before the Edit button (the layout will look better) & hide the publish button for webshops that have already been published.
39 My Webshops staff: My Webshops Online Training > Webshops > immersion The "Open" text and "+" may not be necessary. They add visual noise. Make the title of each webshop be a link to opening the webshop.
40 Edit/Publish Edit Webshop Webshop Development - Edit Webshop What if a staff member wanted only to publish one module? They can't because the only choice is to publish ALL modules. Add a button Publish button under the module area.
42 name-of-webshop Webshop Info. T/TAC Online Staff Area - name-of-webshop What is the little printer way over on the right for? Add a button at the bottom of the webshop description: Print Webshop.
41 name-of-webshop Webshop Info. T/TAC Online Staff Area - name-of-webshop What is that pointed icon to the left of webshop names? It looks like visual noise. Remove the pointed icon or explain it on the page. Instead add a button at the bottom of the webshop description: View Webshop.
43 Continue graphic page T/TAC Online WebShop <graphic page> Orange on blue is a poor color combination. From a human factors standpoint, the use of these colors is a bad because one is near the longest wavelength of visual light (red), and the other is the shortest wavelength (blue). Different wavelengths focus on different parts of the retina. This color combo can look like it's vibrating and fuzzy. Yellow on blue is a much better combination.
44 Continue graphic page T/TAC Online WebShop <graphic page> There is an unnecessary line at the top of this page. Every bit of visual contrast adds either information or noise. This appears to be visual noise. Eliminate the line at the top of the page.
45 Continue graphic page T/TAC Online WebShop <graphic page> The page is too long, you have to scroll down to get to controls. The top banner uses up too much valuable screen space. Make the top banner smaller or eliminate it.
46 Continue Feedback Webshop Feedback This page has the same <title> and top heading as the page for providing feedback after developing a webshop. Change the <title> to Webshop Feedback.
48 Continue Feedback Webshop Feedback It's not clear if this form is connected to the database. We can't tell because we don't know who the immersion emails go to. Please ensure it is saving data.
49 Continue Feedback Webshop Feedback The Name: text box below the name of the user it is from seems redundant since the system is displaying the name of the user. Eliminate the Name: text box.
50 Continue Feedback Webshop Feedback It's not clear who the E-Mail: text box is referring to. Change the label to "Your E-Mail."


contact: TTAC-Grp1_Webmaster
last updated: December 12, 2003