Problem
Analyze the difficulty within the existing interface from an (contextual inquiry) interview with a user. The objective is to learn and exercise the usability research and evalation by applying various methodologies.
Our approach
From the week one to fifteen, our project team practiced Contextual Inquiry, Contextual Design, Keystroke-Level Modeling, Heuristics Evaluation, Cognitive Walkthrough and Think Aloud on the current interface. Breakdowns, insights and design ideas are kept at every stage of the exercise and design rationale is built upon the findings from these methodologies.
My involvement
Affinity diagraming after focus setting sessions required entire group contribution, as well as the integration of gathered data. Analyzing one-full-hour-long Contextual Inquiry gave me a lot of insights on the user's mental model. This understanding led my group to various design opportunities. I also performed heuristics evaluation, cognitive walkthrough and think aloud on the current Blogger.com interface, and figured out what were the most severe problems to solve first. List of breakdowns, insights and design ideas which are kept throughout the project is converted into the usability report by the end of the project, and it was the final deliverable for the project as well as the redesigned interface.
Deliverable
For our final design phase of the project, Our group chose three themes for the redesign: Exploration, Presentation and Control of Content. We had a total of 6 changes in the interface of Blogger.com At the same time, the final usability report is also creaated to give a general overview of which evaluation worked and which was not so efficient.
Redesign #1: Auto-Saving of Posts
Auto-Saving of current unpublished post content in the editor in order to provide the user with ease in navigation while creating a
post and eliminate the possibility of the user losing content. The user’s current post will be saved periodically so that they can freely navigate through the blogger interface without any “discouraging” warnings that make the user “not want to use the system”.
Redesign #2: Preview of Posts
In order to make the process of previewing a post more convenient and helpful to the user, we introduce a new way to allow the user to see the preview of their unpublished post. The new Blogger will provide real-time WYSIWYG preview, showing images, links and colors exactly in the way the post will be seen by readers in the published blog to support the need for consistent and easy "tabbed" navigation.
Redesign #3: Comments page
A major redesign aspect of the blogger is the organization of comments to improve readability and give the author tools to make some comments more salient than others by improving the visibility of comments by clicking on the star for a prominent comment, and the star turns to orange.
Redesign #4: Standardized Font System
The nature of the user’s workflow and the need to make the system a walk up and use system, suggests standardization of the blogger interface to other common text editors. Our redesign is to standardize the interface to be consistent with other common text
editors by adding the font size in points and adding the default font name, and this will help novice users be more comfortable with using Blogger, as they would be familiar with the controls presented to them. Moreover, this standardization will aid in making Blogger more of a walk-up-and-use system.
Redesign #5: Eliminating Jargon and Ambiguous Labels
The current interface assumes to a significant extent that users are familiar with HTML and its associated jargon. However, our user studies suggest otherwise. Users “just do not know enough HTML” to perform the required task and are often confused when they encounter HTML jargon. To resolve this confusion, our solution suggests renaming the Edit HTML tab to “Advanced” and the Compose tab to “Basic”. Also, one user said that she felt “like a jerk” when she spelt words incorrectly during our observation. Specifically, our redesign suggests the inclusion of a more unambiguous label for the spell checker. In addition, we suggest automatically turning on the spellchecker for the user, to remove any feelings of self-depreciation that users might undergo.
Redesign #6: Hyperlink Creation
From our data, we observed that the user struggled with the process of inserting hyperlinks in a post. From the Contextual Inquiry data, we gathered that the user was frustrated because she was not able to copy links into the dialog box. The insertion of a link in the old interface was non-intuitive and did not provide a convenient method for two-way conversion of a link. Our redesign offers the user with a convenient and familiar way to insert link into the post by allowing a two-way link creation. On clicking on the create link icon, a dialog box allows users to enter the link URL and name. The redesigned feature also allows the user to copy link URLs and names into the dialog box and the editor. The alteration process is made possible by allowing users to double click on an existing URL or link name, and bringing with the dialog box with the appropriate field auto filled, which can be easily modified.
TOP