the new qu roombooking system

27
The New QU Roombooking System Quality and Usability Lab Forschungskolloquium 12 May 2014

Upload: moritz-p

Post on 13-Jul-2015

144 views

Category:

Software


1 download

TRANSCRIPT

The New QU Roombooking SystemQuality and Usability Lab Forschungskolloquium 12 May 2014

Agenda

Introduction

Process

Outlook

Demo

2

The Current State

• TheQULab1usesGoogle Calendartomanagerooms• TheusabilityofGoogle Calendarinastandardscenarioisremarkable• But,booking/managingroomsisnotastandardusecaseforacalendarap-plication

• Severalshortcomings• Lackofclarity(especiallywithalotofbookings)• Inabilitytorestrictuseraccessefficiently• Hierarchicalrelationshipsbetweenroomsandequipmentcannotbepictured

1 QualityandUsabilityLabattheDepartmentofSoftwareEngineeringandTheoreticalComputerScienceatTUBerlin

Introduction>Process>Outlook>Demo

3

The Team

Different levels of experience• Bachelor•Master• Professionalexperience

Different backgrounds• ComputerEngineering• InformationSystems•MedicalTechnology

Introduction>Process>Outlook>Demo

• FourstudentsatTUBerlin

•Weeklyconsultationwiththedepartment• SupervisionandsupportbytheQULabstaff

4

The Goals

Didactic Goals• Obtainatheoreticalfundamentofusabilityengineering• Hands-onexperienceinasoftwaredesign/engineeringproject• Gainmethodologicalcompetenceinprototypingandmodelling

Product Goals• Programausable,welldocumented,betaversion• Documentfindingsoftheprototypingphaseforfutureimplementation

Introduction>Process>Outlook>Demo

5

Process

6

TheUsability EngineeringLifecycle

Introduction>Process>Outlook>Demo

Möller, S.Usability Engineering Quality Engineering,Springer Berlin Heidelberg, 2010, 57-74

Design

EmpiricalTesting

Analysis

Proto-typing

IterativeDesign

FeedbackfromField

ExpertEvaluation

7

Analysis

Introduction>Process>Outlook>Demo

1. Pre-Interviews• Sixpotentialusers•Writtensurvey• Sampletask• Openinterview

2. Technical Requirement Analysis• Determinationofcriticaltechnicalne-cessities• LDAPsupport• Administrationcapabilities(GUIforuser,roleandroommanagement)

8

Analysis

Introduction>Process>Outlook>Demo

• Verylonglistoffeaturesresultingfromthepre-interviews• Aquestionnairewasusedtoprioritizefeatures

9

Analysis

Introduction>Process>Outlook>Demo

3. Questionnaire• 16participants• Onlinesurvey• Questionsbasedontheresultsofthepre-interviews

• Assumptionsonthedesiredfea-tureswereconfirmed• Two-stagebookingprocedure(pre-booking,firmbooking)

• Addingofequipmentbookings• Displayofroommetainforma-tion

10

Analysis

Introduction>Process>Outlook>Demo

4. Competitor Analysis• Evaluationofthemaincontenders

•Meeting Room Booking System(http://mrbs.sourceforge.net)• Typo3 Extension Raumbuchung(http://www.typo3-macher.de/typo3-ext-raumbuchungssystem.html)

•DISPOROOM(http://www.disporoom.com/en)• Noneoftheseoptionswassuitablefortheintendedpurpose

11

Prototyping

Introduction>Process>Outlook>Demo

1. User Flowchart• Abasicflowchartoftheuserinteractionwascreated

• Derivedfromresultsoftheinterviews

• Furtherprototypingactivitieswerebasedontheflowchart

12

Prototyping

Introduction>Process>Outlook>Demo

2. Paper Prototype• StaticmockupinMicrosoft Powerpoint• InspiredbyGoogle Calendar• Extendedfeaturesreflectingfindingsoftheanalysis

13

Expert Evaluation/Empirical Testing

Introduction>Process>Outlook>Demo

Click Prototype• DynamicwireframeinHTML/CSScreatedbyAxure

• Basicfunctionalityalongclickpaths• Usedtoconductausertestcomparingeaseofuseandspeedwiththeexistingsolution

• “ThinkingAloud”methodwasusedtofur-therrefinetheuserinterface

• TheprototypewasdiscussedwithexpertsfromtheQULab• Thedesignwasfurtherrefinedbasedonevaluationandtesting

14

Implementation

Introduction>Process>Outlook>Demo

Choosing a Framework• Duetopriorknowledgeinthegroup,PHPwaschosentobeusedaspro-gramminglanguage

• SeveralframeworksofferMVCcapabilitiesandotherdesiredfeatures

PHP5 MVC Templates Validation Ajax LDAPSupport

CakePHP

Symfony

Zend2

• OnlyZend Framework 2metallrequirements• Opensource(New BSD License)• PHP5.3+• SOLIDobject-orienteddesignprinciple

15

The System Architecture

Introduction>Process>Outlook>Demo

Application Database

User Database

Mapper

Controller

ViewJSO

N API

Application Framework

JavaScript Stack

jQuery, jQuery UI,RequireJS, FullCalendar, jsTree

LDAP

16

The System Architecture

Introduction>Process>Outlook>Demo

Back End Design• RunningonastandardLAMP (Linux,Apache,MySQL,PHP)stack• Object-oriented•Model-View-Controllerparadigm• RelyingonZEND2forallnon-standardmethods(nootherthirdpartybackendsoftware)• Easymaintainability• Smoothupdates

• UsesLDAPserverforuserauthentication• AnyLDAPimplementationshouldsuffice(testedwithOpenLDAP)

17

The System Architecture

Introduction>Process>Outlook>Demo

User Interface Design•Mostlyderivedfromtheclickprototype• ZURB Foundation 5based

• Responsivedesign• “MobileFirst”approach• Gridbased

• Fewchangesforeaseofimplementation• Dynamicuserinterface•MakingheavyuseofJavaScript• Clearcolourconcept(mostlywarmtints)• Novisualeffects,animations,etc.toensuregoodperformanceevenonolderdevices

18

User Interface

Introduction>Process>Outlook>Demo

19

Outlook

20

Implementation Roadmap

• Thesoftwaremeetsallexpectationsforthesemesterproject• Compromiseshadtobemadealongtheway• Thereismoreworktodo

• Bettererrorhandling• Unittesting•Moreadaptabletemplatingsystem• Conductabroadusertest

• Evaluateuserfeedback• Fixreportedbugs

Introduction>Process>Outlook>Demo

21

The Code is now Open Source

• LicensedunderThe MIT License (MIT)• “WhiteLabel”editionoftheSoftwarewithoutcomponentsspecifictoTUBerlin

• Participantsoffurtherseminarsworkingonthisprojectarecordiallyinvitedtocontribute

Introduction>Process>Outlook>Demo

The Roombooking Project on GitHub https://github.com/roombooking/pjroombooking

22

Demo

23

Introduction>Process>Outlook>Demo

UsernamePassword

24

Discussion

25

Appendix

26

Illustration CreditIconsPage6:ScrumdesignedbyBjörnAnderssonfromtheNounProject

Page18:responsive-banner-main.svg,Copyright(c)2013-2014ZURB,inc.(MITLicense)

Page20:CrystalBallbyMatthewHawdonfromTheNounProject

Page22:OCTOCATbyGitHub,Inc.

Page23:WorkerbyBartLaugsfromTheNounProject

Page25:ConversationbyTakaoUmeharafromTheNounProject

PhotographyPage1:“Reserviert”byVasile CotovanuislicensedunderaCreativeCommonsAttribution2.0Genericlicense.Basedonaworkathttps://www.flickr.com/photos/vasile23/10356852823/.Toviewacopyofthislicense,visithttps://creativecommons.org/licenses/by/2.0/legalcode.

Illustration

27