usability driven gui design portal as a gateway to intranet resources n.
Skip this Video
Download Presentation
Usability Driven GUI Design Portal as a Gateway to Intranet Resources

Loading in 2 Seconds...

play fullscreen
1 / 24

Usability Driven GUI Design Portal as a Gateway to Intranet Resources - PowerPoint PPT Presentation

  • Uploaded on

Usability Driven GUI Design Portal as a Gateway to Intranet Resources. Matthew Winkel Usability Analyst. About TCNJ. Character

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'Usability Driven GUI Design Portal as a Gateway to Intranet Resources' - wenda

Download Now An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
usability driven gui design portal as a gateway to intranet resources

Usability Driven GUI DesignPortal as a Gateway to Intranet Resources

Matthew WinkelUsability Analyst

about tcnj
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
About Me
  • Web Information Architect
  • Usability Analyst
  • Web Producer
  • Project Manager
  • GUI Designer
  • Photo Blogger
  • Certified Webhead
  • Adjunct Professor in Humanities
case study
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
usability strategy
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
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
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
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
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 techniques1
Data Collection & Prototyping Techniques
  • Indirect Methods
      • Survey
      • Usability Questionnaires
      • Help Desks/Support Lines
      • Bulletin Board/Discussion Forum
      • Web Logs
indirect methods evaluation
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
Complimentary Data Gathering
  • Combine various data methods to provide the needed information on time and budget.
identify critical success factors
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
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)


personal interviews
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
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
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
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
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
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]
  • Matthew Winkel
  • AOL: iamwinkel