Usability Driven GUI Design Portal as a Gateway to Intranet Resources Matthew Winkel Usability Analyst

About TCNJ Character –A highly selective public residential college focusing on the undergraduate experience. Seven schools—Art, Media, and Music; Business; Culture and Society; Education; Engineering; Nursing; and Science—offering more than 50 liberal arts and professional programs Undergraduate Enrollment –Approximately 5,600 full-time students.

About Me –Web Information Architect –Usability Analyst –Web Producer –Project Manager –GUI Designer –Photo Blogger –Certified Webhead –Adjunct Professor in Humanities

Case Study  TCNJ uses PeopleSoft Portal as a gateway to Intranet resources.  This particular implementation focuses on Human Resources and Payroll Employees: 20 Power Users  Total Time for Usability Strategy/Planning and GUI Design: 4 weeks

Before

After

After2

Usability Strategy  Get users involved early and often in the design process, to mitigate the risk of re-designing in the development phase.

Get Smart Early  You have the most design freedom in the beginning when you know the least about your users. Getting smart early lets you incorporate good ideas before the site is frozen.

Get Feedback Often  You will need the most feedback when you are gathering requirements. However, you will need to test your assumptions throughout the design process.

Data Collection & Prototyping Techniques Direct Methods  Personal Interview  Screen Captures  Contextual Inquiry  Focus Group  Task Flow Diagrams/Storyboards  Card Sort/Reverse Card Sort  User Performance Tests  User Group Meeting/Usability Roundtable  Task Modeling Assessment

Direct Methods - Evaluation Personal Interview –S: Users know best about tasks they perform –W: User may provide inaccurate info or leave out important aspects of their work. Contextual Inquiry –S: Can watch what user say and do in a real setting. –W: Observer can disrupt the user. Usability Roundtable –S: Users bring work into a neutral setting for observation and analysis. –W: Lacks behavioral validation

Data Collection & Prototyping Techniques Indirect Methods  Survey  Usability Questionnaires  Help Desks/Support Lines  Bulletin Board/Discussion Forum  Web Logs

Indirect Methods - Evaluation Survey/Questionnaire –S: Help collects demographic data. –W: May not represent all users. Support Line –S: Can gather data on common problems with existing systems. –W: Sampling of calls may not be very systematic. Bulletin Board –S: Easy for participant to use. –W: Sampling of messages may not be very systematic.

Complimentary Data Gathering Combine various data methods to provide the needed information on time and budget.

Identify Critical Success Factors Streamline Business Processes to Increase Productivity Reduce Reliance on Help Desk Reduce Training Costs Effectively Manage Implementation Project Resources

ROI Calculation Increased Productivity Users x #Uses per day x Days per year x Loaded Salary x Increase in Efficiency (time) = Annual ROI 20 users 100 page access per day 230 days 8 40,000 salary/1840 (230 days x 8 hours) 20 seconds increase in efficiency (.0005 hours) =$5000

Personal Interviews We began the design process by interviewing HRMS users to gather initial requirements. We asked groups of HRMS users to print screen shots of the HRMS application and identify the links they used to navigate to key tasks. The interface design team then applied usability best practices to group (or chunk) these tasks together by audience and topic and develop a paper prototype of portal navigation shortcut collections.

Reverse Card Sort & Surveys Armed with doughnuts and coffee, we presented the paper prototype to HRMS user groups and applied a reverse card sorting technique to identify gaps in our information architecture. At this meeting, we also performed a survey to determine which intranet resources are used most often.

Usability Questionnaire & Brand Design Test We used these detailed requirements to build an advanced HTML/CSS prototype which contained all of branding and graphical elements (e.g. use of color and icons) of the portal. HRMS users reviewed the advanced prototype on their own computers and were asked to evaluate labeling conventions and comment on branding. We used this feedback to write our detailed design documents and develop the Portal GUI.

Next Steps  Perform usability test with 8-10 users  Write support documentation for customizing portal navigation  Monitor user comments with feedback form and surveys

If you had 5-6 weeks Design Phase Week 1-2: Personal Interview, Surveys, Contextual Inquiry, Focus Groups, Personas Week 3: Card Sort Tests, Task Flow Diagrams, Usability Questionnaires [Paper Prototype] Week 4: User Performance Tests, Usability Questionnaires, Task Analysis & Scenarios [Advanced Wireframe Prototype] Development Phase Week 5: Usability Test [Functioning Prototype] Week 6: Usability Roundtable, Feedback Forms

If you had 2 weeks Design Phase Week 1: Personal Interview, Surveys, Usability Questionnaires [Wireframe Prototype] Development Phase Week 2: Usability Test, Surveys [Functional Prototype]

Contact Matthew Winkel AOL: iamwinkel