the new qu roombooking system
TRANSCRIPT
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
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
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
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