theGuiGuru.com » Usability

Cell Phone Menu Structure – Visio

Mike Jenkins — Tue, 14 Jul 2009 18:57:39 +0000

This diagram was created to illustrate the menu process flow and available features for 3 different cellular phones being developed which would used shared software. You can view the implementation of these by looking at the wireframes which are also part of my portfolio.

PDF Version Available Here

Information Graphic – BC Watch

Mike Jenkins — Mon, 13 Jul 2009 22:44:50 +0000

The above information graphic was created as part of a project to develop a watch which assisted in the use of birth control pills to help prevent user error. The information graphic is meant to illustrate how to change pill cartridges in the watch.

Information graphics or infographics are visual representations of information, data or knowledge. These graphics are used anywhere where information needs to be explained quickly or simply, such as in signs, maps, journalism, technical writing, and education.

Flash Wireframes/Prototypes – Cellular Phone UI

Mike Jenkins — Mon, 13 Jul 2009 22:33:26 +0000

I created these wireframes as part of my senior capstone design project for Northeastern University. The wireframes were meant to be upgraded interfaces for 3 user profiles: The Grandma, The Dad and The 20-Something College student. The motorola flash interface was created to mimic a popular phone at the time so that user testing sessions could be used to create baseline task completion times and usability ratings.

You can use the flash menus below as you would a normal cell phone basically. The Motorola version however has limited functions to specific tasks that were required for the usability sessions.

Hand Drawn Wireframe – Usability Portal

Mike Jenkins — Mon, 13 Jul 2009 22:04:09 +0000

This wireframe was created to illustrate a concept for a usability portal to be used as a central hub for UI/IA experts. To show basic interactions post-it notes were used which showed how different widgets in the interface changed based on simulated interactions. The blue numbers represent annotations that explained different aspects of the wireframe for users.

Visio Wireframes – FalconNet

Mike Jenkins — Mon, 13 Jul 2009 21:59:43 +0000

FalconNet Visio Wireframes (PDF Version)

The above show visio clickthrough wireframes that were developed to illustrate suggested imnprovements to Bentley’s FalconNet website. The PDF version is provided for viewers who don’t have Visio access but it is not interactive.

Powerpoint Wireframes – GreenT Card

Mike Jenkins — Mon, 13 Jul 2009 21:31:18 +0000

This prototype is meant to show the registration process for signing-up to use a GreenT Card™. The GreenT Card™ is a new design concept that would be used by Boston area inhabitants to pay for public transportation while at the same time earning discounts to local businesses and to public transportation by displaying Green tendencies (e.g., using public transportation, walking, car-pooling, etc…). Users earn points based on their ‘greenness’ which allow them to gain access to the discounts. The website is used to create a profile to track your greenness versus other users as well as to view discounts that become available at different point thresholds. This was created as a project for a prototyping course at Bentley University as a part of a team of 4.

You can download the wireframe powerpoint file using the link below, but note that not all functionality has been built in as the wireframes were meant to illustrate the process of registering for a GreenT Card and showing some basic features.

GreenT Card Website Wireframes (*.zip format with powerpoint show inside)

Storyboard Sample

Mike Jenkins — Mon, 13 Jul 2009 17:54:54 +0000

This example is a simple storyboard created to illustrate the key uses of a special task logging tablet PC application that could be used during usability test moderation to facilitate easy session note capture.

Storyboards are graphic organizers such as a series of illustrations or images displayed in sequence for the purpose of previsualizing a motion graphic or interactive media sequence, including website interactivity.

GOMS – KLM Evaluation of Digg.com Registration

Mike Jenkins — Mon, 13 Jul 2009 17:41:05 +0000

GOMS-KLM Digg.com Registration Process Report

This above example shows the application of GOMS-KLM to the Digg.Com registration process. The first version analyzes the project as-is with a simple use-case. The second analysis shows an improved process flow to reduce task time with he same use-case. This was created as a sample of the GOMS methodology for a class I took at Bentley.

KLM (or KLM-GOMS) stands for Keystroke-Level Model, a hard science approach to human–computer interaction (HCI), based on CMN-GOMS. The Keystroke-Level Model is an 11 step method that can be used by individuals or companies seeking ways to estimate the time it takes to complete simple data input tasks using a computer and mouse.

User Personas

Mike Jenkins — Mon, 13 Jul 2009 17:31:19 +0000

Primary and Secondary User Persona Examples

Personas are fictitious characters that are created to represent the different user types within a targeted demographic that might use a site or product. Personas are most often used as part of a user-centered design process for designing software or online applications, in which the goals, desires, and limitations of the user are considered when designing the product. The above link provides a pdf with a primary and a secondary user profile I created while working on the FalconNet project for Bentley University.

Usability Study – FalconNet

Mike Jenkins — Mon, 13 Jul 2009 16:58:01 +0000

Bentley FalconNet Usability Study Report

Bentley University created FalconNet as a tool for students, alumni and potential employers to connect with one another inside the Bentley domain. Unfortuantely due to a plethora of usability issues early adoption was somewhat lacking. As a result the school requested a usability study be conducted to weed out the main issues for both student and alumni users to try and enhance the over all user experience. The project was conducted as part of a team of students via HFIDO again while I was serving as Director of Testing & Assessment. The final report along with screenshots, usability session findings, survey results and recommendations can be viewed download with the link above.