Embed Size (px)
Citation preview
Usability Driven GUI DesignPortal as a Gateway to Intranet Resources
Matthew WinkelUsability 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 ProductivityUsers x #Uses per day x Days per year x Loaded Salary x Increase in Efficiency (time) = Annual ROI
20 users100 page access per day230 days 840,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 PhaseWeek 1: Personal Interview, Surveys, Usability
Questionnaires[Wireframe Prototype]
Development PhaseWeek 2: Usability Test, Surveys
[Functional Prototype]
