HCI: JCU Workflow Re-Design 2010 SP2: CP3301/CP5607 Human Computer Interaction Angela McCarthy Glenn...

19
HCI: JCU W orkflow HCI: JCU Workflow Re-Design Re-Design 2010 SP2: CP3301/CP5607 Human Computer Interaction Angela McCarthy Glenn Molochino Laurence Tardiani

Transcript of HCI: JCU Workflow Re-Design 2010 SP2: CP3301/CP5607 Human Computer Interaction Angela McCarthy Glenn...

Page 1: HCI: JCU Workflow Re-Design 2010 SP2: CP3301/CP5607 Human Computer Interaction Angela McCarthy Glenn Molochino Laurence Tardiani.

HCI: JCU Workflow HCI: JCU Workflow

Re-DesignRe-Design2010 SP2: CP3301/CP5607Human Computer Interaction

Angela McCarthyGlenn Molochino

Laurence Tardiani

Page 2: HCI: JCU Workflow Re-Design 2010 SP2: CP3301/CP5607 Human Computer Interaction Angela McCarthy Glenn Molochino Laurence Tardiani.

Team Members

0Team Name: SIERRA0Team Members

0 Administration/Language Leader: Angela McCarthy0 Creativity Leader: Glenn Molachino0 Technical Leader: Laurence Tardiani

Page 3: HCI: JCU Workflow Re-Design 2010 SP2: CP3301/CP5607 Human Computer Interaction Angela McCarthy Glenn Molochino Laurence Tardiani.

Overview

0Application0Milestones0Design Evolution0 Implemented Changes0Current Interface and Demonstration0Feedback0Future Development

Page 4: HCI: JCU Workflow Re-Design 2010 SP2: CP3301/CP5607 Human Computer Interaction Angela McCarthy Glenn Molochino Laurence Tardiani.

Application0 JCU Workflow0 Available via StaffOnline

under Workflow0 Payroll and leave application

system for James Cook University staff0 Staff have to submit

payroll claims every two weeks

0 Primary method of payJCU Workflow Login Screen

Page 5: HCI: JCU Workflow Re-Design 2010 SP2: CP3301/CP5607 Human Computer Interaction Angela McCarthy Glenn Molochino Laurence Tardiani.

Issues

0Claim Confirmation0Search Field0Payroll Claim

0 Calendar0 Drop Down Menus0 Work Date0 Select Job

Page 6: HCI: JCU Workflow Re-Design 2010 SP2: CP3301/CP5607 Human Computer Interaction Angela McCarthy Glenn Molochino Laurence Tardiani.

Re-design Process

1. Identify users

2. Identify how current application works

3. Identify issues with current application

4. Propose a solution to address these issues

5. Create a paper-prototype

6. Create a low-fidelity prototype to test navigation

7. Create a high-fidelity prototype to test solution

8. Implement changes into final prototype

Page 7: HCI: JCU Workflow Re-Design 2010 SP2: CP3301/CP5607 Human Computer Interaction Angela McCarthy Glenn Molochino Laurence Tardiani.

Milestones

0Milestone 1: Project Overview0Milestone 2: Contextual Inquiry0Milestone 3: Storyboards, Low-fidelity Prototypes and

User Testing0Milestone 4: High-fidelity Prototype and User Test

Page 8: HCI: JCU Workflow Re-Design 2010 SP2: CP3301/CP5607 Human Computer Interaction Angela McCarthy Glenn Molochino Laurence Tardiani.

Contextual Inquiry

0Acknowledge Usability Goals0 Identified Issues

0 Job Types – Descriptions are ambiguous0 Naming Conventions0 Unorganised Design Structure0 Redundantly Repetitive Input Fields

0 Implement a solution and begin re-design process0 Prototyping

0Paper Prototype0Low-Fidelity Prototype

Page 9: HCI: JCU Workflow Re-Design 2010 SP2: CP3301/CP5607 Human Computer Interaction Angela McCarthy Glenn Molochino Laurence Tardiani.

Paper-Prototype

0Sketches of design proposals

0Testing basic navigation using flash cards0 Navigational Tree

Paper Prototype

Page 10: HCI: JCU Workflow Re-Design 2010 SP2: CP3301/CP5607 Human Computer Interaction Angela McCarthy Glenn Molochino Laurence Tardiani.

Navigational Tree

Workflow Navigational Structure

Page 11: HCI: JCU Workflow Re-Design 2010 SP2: CP3301/CP5607 Human Computer Interaction Angela McCarthy Glenn Molochino Laurence Tardiani.

Low-Fidelity Prototype

0Created in Flash0 Interactive ‘flash card’ style

0 Navigation and interface alterations implemented

0Demonstration: 0http://am-jcu-repository.googlecode.com/files/

workflowApp%20Prototype.swf

Page 12: HCI: JCU Workflow Re-Design 2010 SP2: CP3301/CP5607 Human Computer Interaction Angela McCarthy Glenn Molochino Laurence Tardiani.

Prototype EvolutionPrevious Functions (Low-Fidelity) Required Adjustments (High-Fidelity)

Flash Application HTML Application

Username Field Blank Username Field Interactive

Search Field Static Search Field Interactive

Submit Payroll Claim Static Submit Payroll Claim Interactive

No Drop Down Menus Implement Drop Down Menus

Date Selection Hyperlink Date Calendar Inline

Help not Implemented Help Implemented

No Confirmation for Payroll Submission Confirm Payroll Submission

Hours Worked Selection Static – Hyperlink Option Hours Worked Selection Interactive – Drop Down Menu

Page 13: HCI: JCU Workflow Re-Design 2010 SP2: CP3301/CP5607 Human Computer Interaction Angela McCarthy Glenn Molochino Laurence Tardiani.

High-Fidelity Prototype

0 Implemented and hosted online0 Added changes as required from low-fidelity prototype

0Changes to High-Fidelity0User feedback suggestions

0 Date Selection: Originally drop down menu’s, now inline calendar selection

0 Hours Worked: Hour selections 1-5, changed to 1-12

Page 14: HCI: JCU Workflow Re-Design 2010 SP2: CP3301/CP5607 Human Computer Interaction Angela McCarthy Glenn Molochino Laurence Tardiani.

Design Evolution

1. Interface designs originally ‘sketched up’

2. Interfaces created in Photoshop

3. Interface designs then placed in interactive flash presentation

4. Application then moved to be hosted online

5. Changes implemented as required as per user tests

Page 15: HCI: JCU Workflow Re-Design 2010 SP2: CP3301/CP5607 Human Computer Interaction Angela McCarthy Glenn Molochino Laurence Tardiani.

Implemented Changes

Original Workflow Re-Designed Workflow

Compare

Page 16: HCI: JCU Workflow Re-Design 2010 SP2: CP3301/CP5607 Human Computer Interaction Angela McCarthy Glenn Molochino Laurence Tardiani.

Current Interface

0 Interactive Demonstration0http://auction.maths.jcu.edu.au/HCIapplication/

Page 17: HCI: JCU Workflow Re-Design 2010 SP2: CP3301/CP5607 Human Computer Interaction Angela McCarthy Glenn Molochino Laurence Tardiani.

Feedback from Users0Surveyed a select group of users, male and female,

users who frequently use the application, age range from 18-50 years of age

0Average effectiveness rating of 1.57 0 (On Scale of 1 – 5, 1 being highest, 5 being lowest)

0Users approved of following:0 Job Search0 Aesthetics

0No issues with errors0Feedback suggested that users assumed application

was full/final version

Page 18: HCI: JCU Workflow Re-Design 2010 SP2: CP3301/CP5607 Human Computer Interaction Angela McCarthy Glenn Molochino Laurence Tardiani.

Future Devlopment

0Auto-filled Payroll Claim Forms0 Staff will be able to save a default job type and simply

select from a drop down menu pre-saved jobs0Minimises clicking and allows for faster submission of

payroll claims

0More Information on project can be found at http://code.google.com/p/honours-3d-paluma/wiki/CP5607HCI

Page 19: HCI: JCU Workflow Re-Design 2010 SP2: CP3301/CP5607 Human Computer Interaction Angela McCarthy Glenn Molochino Laurence Tardiani.

Summary

0Completed two prototyping phases0Met development specifications

0 Design Choices0 User Requirements0 Acknowledged User Feedback

0Application open for continued future work