1. User Interface Usability Specification
User Interface Design (CS346-1503A-01)
Paulo Silva
August 10, 2015
2. Contents
Project Outline User...........................................................................................................................3
Interface Technical Requirements........................................................................................................4
Screen Size..................................................................................................................................4
Other Capabilities...........................................................................................................................6
Usability Measures..........................................................................................................................6
User Interface Human Interaction Requirements..................................................................................7
User Interface Design Prototypes ........................................................................................................8
Usability Test Questionnaire..............................................................................................................12
Section 1: Demographics ...........................................................................................................13
Section 2: Usability....................................................................................................................15
Section 3: Application Function Specific......................................................................................17
Section 4: Additional Feedback...................................................................................................18
Usability Test Instruction Guide.........................................................................................................19
Interface Walkthrough:.................................................................................................................20
Selection Details Menu..................................................................................................................22
Usability Test Results ....................................................................................................................24
Final User Interface Design................................................................................................................28
REFERENCES.....................................................................................................................................31
3. Project Outline User
Miami is probablymostfamousforitsbeaches,nightlife anddiversecultural channels. Some of
itstop attractionsinclude worldclasszoosandmuseums,whichare suitable forfamiliesandstudent
travelersalike. Miami restaurantsoffersome of the finestLatincuisine;andasforshopping,Miami has
justabout all that one couldhope for.
The major categoriesthatwe’ll be focusingonforthe TouristKioskUserInterface will includethe
followingsevenoptions:
Arts andCulture
Tours and Events
Beaches& Water Sports
Cinema
Bars and NightLife
Dining
Shopping
Cruises
4. Interface Technical Requirements
The ultimate objective forthe Miami TouristKioskisthatit be simple touse andcapable of being
implementedona wide varietyof platforms,including:
Wall mountedkiosks&Freestandingkiosks
Mobile Apps(formobile phonesandtablets)
DesktopWebBrowserKiosks
In all butthe lastcase,the userinterface willincorporate touchscreenandvoice control capabilities. In
orderto achieve the mainobjectives,ourdesignprocesswill startbyconsideringthe smallestpossible
screensize forwhichthe interface isintended. Inthisway,we will be able tofocuson the most
importantfeaturesthatoursystemwill be requiredtohandle.
ScreenSize
A givenimage preparedfordisplayonaregularmonitor,will appearpoorlyif leftunchangedwhen
displayedonahigherresolutionscreen. There isa helpful distinction thatwe canmake to approach this
problem:display sizevs screenresolution. Display sizeisgenerallymeasuredininchesandreferstothe
diagonal lengthof the screen. Screenresolutionismeasuredinpixels,withtwocoordinatestospecify
itsdimensions.
To prepare our digital kiosksforthe multitude of varyingscreenresolutions,we’ll needtoconsiderthe
pixel dimensionsforthe imagesandgraphicswe intendtomake partof our workassets. Keepinginline
withour planformakingthe interface compatible withwidestrange of digital platforms,we’llstartoff
by consideringwhatthe image dimensionsshouldbe if the userwere usinganoutdatediPhonemodel.
5. The iPhone 4(s) hasa displaysize of 3.5 incheswitharesolutionof 640 X 960px. The
pixel dimensionsforthe latestiPhone is1080 x 1920px, and it’sscreensize isjust
5.5in. (https://www.apple.com/iphone/compare/)
Typical desktopmonitordisplaysare between21– 24in now in days. Yet,evenfor
screensthatlarge,it’sunlikelythatwe wouldneedtoprepare image assetswitha
widthlargerthan1920px. The reasonfor the higherresolutionof modernmobile
devicesisdue mostlytocompetitionbetween the varyingbrands. Butalso,because
it iseasiertoread ona small monitorwhenyouinclude these exaggerated
specifications. Onalarge monitor,readingatlowerresolutionsisjustaseasily
achieved.
Accordingly,ourfirstsetof graphicimageswill notinclude imagescontainingwidths
largerthan 1080px, whichwouldmore thansuffice forolderiPhonemodels,andstill
be enoughmaximize the full widthof the latestretinadisplaywhenorientedinportraitview.
As forthe screenresolutionof Androidmobiledevices,the logicof cappingthe image widthto1080px
wouldhold. Observe the followingSmartphone ComparisonGuide:
6. It’salso importanttonote that a higherresolutionthanwhatisneededisgenerallynotanissue for
lowerresolution screens(softwarewillmake the requiredadjustment). The onlyproblemwithincluding
more resolutionthannecessaryisthe effectithason systemresources. If the image isbeingloaded
froma webserver,suchaswill be the case whenwe designthe interface forbrowsernavigation,than
the resource inquestionwouldbe bandwidth,whichwillbe the mostsignificantfactorforhandling
resources. Evenoldermodelsof mobile devicesthatwe don’tintendtoprepare forwouldbe capable of
easilyhandlinglargerimages.
Other Capabilities
For wall-mountedandfreestandingkiosks,printingwill be necessaryinordertoprovide visitorswiththe
optiontoprint an itineraryof theirplansforthe specifiedlocation. Byusingthe currentlocationasa
startingpoint,simple voice commandscouldeasilytriggerthe systemtoprovide nearbyrestaurantsand
conveniencestores.
Usability Measures
Before we beginthe discussiononUserExperience,we’ll wanttospecifyquantitative measuresthatwe
can use for benchmarkingperformance. Specifically,the followingrepresentsourtopconcern:
Task Time
Task CompletionRate
Error Rate
UsedFeatures
The task time will be measuredbycountingthe numberof secondsittakesfora givenusertocomplete
a giventask. Task Completionrate willbe apercentage variable,tobe measuredaccordingtothe
numberof userswhofail to complete agiventask. Error rate will countthe numberof timesusershave
to returnto a previousmenuasa resultof not findingwhattheywere lookingfor,andusedfeatureswill
measure whichfeaturesare mostpopularwhenusersare allowedtofreelyexplore the interface. All
benchmark experimentswillbe customtailoredforasingle measure.
7. User Interface HumanInteractionRequirements
Describe howthe userwill interactwiththe kioskuserinterface intermsof accessand
navigationbasedonthe requirementsdescribedinthe previoussection.
Describe howthe userwill interactwiththe smartphone interface intermsof accessand
navigationbasedonthe requirementsdescribedinthe previoussection.
The firstscreenthat the userwill be metwithwill provide twomajoroptions. One of the optionstobe
offeredwillallow the usertobuildatripitinerary,andthe otherwill provideformore specificsearch
and browse options. The logicbehindthismethodisinthe assumptionthatatravelerwho stopsbya
wall mountedorfreestandingkiosktogatherinformation,wouldlikelynothave plannedbefore getting
to theirdestination(we’re assumingthatpreparedtravelerswouldeverythingsavedintheirsmart
phones);whileotherswouldalmostcertainlyhave somethinginmindwhenusingthe kiosk(perhaps
theythoughtof somethingonthe spotthat theydidn’tinclude ontheirtripplans).
Upon makingtheirinitial selection,the systemwill displaythe relativescreen.
8. User Interface DesignPrototypes
As mentionedin aprevioussection,tonarrowsour
focusso as to prioritize the mostimportantcomponentsof
the userinterface,ourfirstmock-upswill be made forthe
smallerscreensof mobiledevices.
Anotherof our objectivesforthe userinterface wasthat
the interface be simple andintuitive,andsowe foundthat
justthree optionsforthe openingmainmenuscreenof the
iPhone wouldbe the mostappropriate.
The BuildItineraryoptionwill sendthe usertoa screen
presentingamapwiththe user’scurrentlocation,a listto
the right side of the map showingthe majorcategories,and
anotherlistjustbeneathbothwindowstodisplayalistof
the relative categoryoptions.
The Browse Buttonwill allowusersbrowse throughalistof
popularlocationsineachof the categories,andgetmore
informationaboutasingle businessselection.
The Search TextBox at the bottomof the userinterface
wouldsimple provide alistof bestpossiblematches
available inthe same database containingthe Browse menu
options.
9. There are three mainmenuoptions:Itinerary, PlannerandMap,all shownin the headerof the
image below,respectively. The firstscreenshownisforthe Itinerarymenuoption,where userswillbe
able to browse througha listof nearbylocationsthattheycan add to the itinerary. The default
locations thatwill appearlistedare fornearbyrestaurants,butthe user will have the option of changing
thislistbysearching or clickingonthe drop-downmenu toview listof categoryoptions(asshowninthe
image below). The calendarshownon the right-handside canbe usedto selectitineraryitemsfora
future date.
The total widthof thismenuis640px, whichwouldworkfine onoldermobile devices,evenwhenusing
the portraitorientation. The colorschosenforthe menureflectacommontheme withMiami’smost
popularsportsteamsand university.
11. Whenusersclickon the map icon,theywill see amap of theircurrentlocationbydefault. Afteritems
have beenaddedtotheiritinerary,theywill appearoverlaidonthe map.
Othercomponentstobe consideredforfuture draftsof thisdocumentare as follows:
Banner heading
Menus and options
Graphics
Items you want to hotlink to other pages
Fill-informlayouts
Logo that can go in banner headingor as the backdrop
Also font and color you intend to use throughout application
Other options that you want to appear on every page
12. Usability Test Questionnaire
The motivationfordevelopingthe UserExperience testingformsisrelatedtoourgoalsfor the
projectas a whole:tomaximize the speedof learningandfindthe optimal configurationthatwill make
our systemcompactand easyto use.
The resultsto be takenfromthe following questionnaireswill be assessedusingexistingparameters,as
specifiedbythe psychometricevaluationstandards andSystemUsabilityScale. Sotointerpretthe
scoreswe will be convertingthe numbersaccordingtoa scale reflectingthe importance of sectionsand
theirrelatedtasks.
In a discussionrelatedtoresultsof hisquestionnaire,authorJ.Lewisreportedthat“the psychometric
evaluation…showedthatitisreasonable tocondense the three ASQitemsintoasingle scale through
summation…[andthat] the available evidence indicatesthatthe ASQisreliable,valid,andsensitive.”
(Lewis,1995) We believethese findingsare accurate andin accordance withour objectives.
Instructions for filling out the questionnaire:
Your feedbackisveryimportantbecause itallowsustobetterlearnfromourmistakes in
developingthe touristkioskapplication. The questionnaire is dividedintofoursections,the firstof
whichisbrief sectionregarding demography.
Section2 isabout usability. Thissection asksyoutoevaluate statementsrelatedtoyourexperience
usingour system ona 1 – 5 scale (1 beingthe worse score youcould give,and5 a perfectscore).
Section3 isabout the followingfunctionspecifictasks:
1. Locate specifiedMiami attractionusingthe searchfunction
2. Addmultiple locationstoanItineraryList
3. Delete alocationfromthe ItineraryList
4. Modifythe orderof itemsonthe ItineraryList
5. Printthe an Itinerary List
We’ll be askingtoperformthese tasksinorderto testour systemforpossible bugs,aswell astogain
betterinsightintothe organizationof ourmenuitems. We believethatperformingthese taskswill also
helpyouinansweringthe final questions(section4),where we’ll askforyourfeedbackonhow to
improve the system.
We findthatSection4 is oftenthe mostuseful,since thereare aspectsof ourdesignthatwe may have
overlookedwhencreatingthe questionnaire. Atanyrate we are highly appreciativeof yourtakingthis
time to provide uswithfeedback;sothanksagain,andhave fun answeringthe questions
13. Section1: Demographics
Questionnaire for participants in UI Usability Testing
Age Group
Please select from the following age groups
o 20 - 30
o 31 - 49
o 50+
Gender
Please select your gender
o Female
o Male
Primary Language
Please type the name of your primary language
Income Level
Please select an income level
o Less than 30,000 annual
o 30 - 50k annual
o 50 - 90k annual
o Over 90k annual
o Rather not say
Marital Status
Please tell us whether you are married
o Married
o Single
o Divorced
o Widowed
15. Section2: Usability
Evaluation of Tourist Kiosk User Interface
Overall the interface was easy to use.
Strongly Disagree Strongly Agree
I was able to find everything I was looking for
Menu options appeared properly placed and intuitive
Strongly Disagree Strongly Agree
How did you like the categories for browsing Miami attractions?
Did some options appear misplaced?
Didn’t like it Loved it!!!
The information provided for available locations were appropriate
Everything you would expect from a directory listing was present
Strongly Disagree Strongly Agree
Transactions between menus were fluid (i.e. no interruptions)
Strongly Disagree Strongly Agree
The fonts used were easy to read.
Font letters had an appropriate size and style
Not at all For sure!
16. The wording of instructions provided was simple to follow
Strongly Agree Strongly Disagree
Voice recognition worked like a charm
Leave blank if this was not a feature that you used
Not at all For sure!
Returning to previous menus and starting over was easy to do
Not at all For sure!
Shortcut key-combos easy to remember
For users of the desktop version of the tourist kiosk
Not at all For sure!
17. Section3: ApplicationFunction Specific
How difficult was it to find the specified locations using the search feature?
Frustrating Seamless
How difficult was it to add items to the itinerary?
Frustrating Seamless
How difficult was it to delete items from the itinerary?
Frustrating Seamless
How difficult was it to modify the order of items in the Itinerary list?
Frustrating Seamless
How difficult was it to print the itinerary
Frustrating Seamless
18. Section4: Additional Feedback
Your comments will help our testers improve our interface
What changes do you think would improve the system?
Anything in particular that you thought was missing?
What did you think about the customization options?
Feature available on the mobile version of digital kiosk
Submit
You may resubmit your responses anytime.
19. Usability Test InstructionGuide
Introduction
Hello,myname isPauloSilva. Miami DIGITOURIST LLC is seekingpeoplewithaninterestfortravel and
tourismto take part ina usabilitytest forourupcomingdigital touristkiosksoftware.
We wouldlike toinvite youtake partinour usabilitytestinginordertomaximize the qualityof ourfirst
release. Withyourpermission,we wouldliketoprovide youwithacopyof the software anda
questionnaire toprovide uswithrelatedfeedback.
Disclaimer
Please note thatwe dovalue yourprivacy,and sohave takeneverymeasure toensure thatyour identity
will notbe sharedwithanyone. Alsonote thatgiventhe time constraintsinherentof thisproject,we
will needresponsestobe returnedtousno laterthan5-days fromthe date youconfirmparticipation.
We wouldappreciate yourhonestyinpassingoverthisrequestforfeedbackif youfindthatthe 5-day
cutoff wouldbe improbable.
Havingsaidthat, doesthissoundlike somethingthat mightinterestyou? If so,we thoughtyouwould
findthe followinginformationuseful:
About the interface
The most importantfunctionpertainingtothissoftware isthe abilitytoallow usersto buildanitinerary.
Withthe use of high-speedinternetitispossibletoperformarelativelyquicksearchof surrounding
areas througha simple browsersearch. Buildinganitineraryfromaregistrycontainingeverylocation
and special eventinthe worldwouldperhapsbe quite adifferentmatter.
The Miami TouristKioskallowsusersnotonlytoquicklyfindthe mostrelevantinformationrelatedto
your travel needs,but italsoallowsyoutoquicklyformulateatripplanby givingyouthe optiontoadd
listingsof interestontoyourownpersonal itinerary.
Havingarrangedyour listingstoyourheart’scontent,youwill alsobe providedwiththe optiontoprint
the itinerary. The bestwayto geta goodappreciationforthe value of thisutility,itwouldbe bestto
followawalkthroughcontainingimages;hencewhatfollows:
20. Interface Walkthrough:
There are three options presentedasthumbnailsinthe
headerof every screen.
Here is whattheylooklike:
How to build an itinerary
1. Clickon the Itinerarybutton:
2. Findthe dropdownmenuatthe bottomof the screen(defaultsto Dining),andselectacategory
of interest(notice thatthe listchangeswhenyouchange the category).
3. Clickon listitemsof interesttoview ascreenwithmore detailsrelatedtothe selectedoption.
4. Clickon the check-box of anyentryappearingonthe listandclick on“Add to Itinerary”to
include these aspartof youritinerary,whichcanlaterbe viewedinthe “Planner”menu.
Itinerary Menu
From the ItineraryMenu,you’ll be able toadd/removeselecteditemsasdiscussedinthe instructions
above. You’ll notice onthe mobile device interface thatbyholdingyourfingeronthe list, andslidingit
up or down,will allow youtoscroll throughthe list. Once youhave made yourselection,simplyclickon
the “Add to Itinerary”buttonandthe selecteditemswillbe addedtothe list.
21. Planner Menu:
Before youprintyouritinerary,youmaywantto geta final lookatthe optionsyouaddedto
the itinerary,perhaps make changestothe orderof the places youincludedinyourtripplanor even
findthatsome of the itemsyouenteredneedtobe removed (change of hearttype of deal). Forsuch
options,the PlanerMenuprovidesaconvenientsetof options:
Whendeletingalistitem,the systemwill automaticallyissueawarningmessage requestinguserinput
for confirmation. Thismechanismservesto ensure thatthe userwill notaccidentallydelete anitem
fromtheiritinerarylist.
To move itemsupor down,the menuoptionsare convenientlylocatedjustbelowthe list(andnextto
the “Delete”button). The “Back” buttoncontinuestoappearat the bottomof the screen,allowing
usersto alwaysgetback to the previousscreen.
22. Selection Details Menu
Regardlessof whetheryouare lookingatthe listof Miami Attractionsfromthe ItineraryorPlanner
menu,you’ll alwayshave the optionof attaining more detailsaboutagivenselectionbycalling-upthe
“SelectionDetailsMenu”. Todo this,youonlyneedtoclickon the listingof interest.
Where imagesorvideosforthe selectedlocationare available,theywill appearonthe left-handside of
the screen. Note that a setof venue relevanttabswill appearinasectiontothe right of the
image/video. These workjustlike tabsonan internetbrowser;byclickingthemyouwill call-upthe
relevanttextbasedinformation.
Alsotake notice of the scrollbarappearingonthe tabbedsection;youcan use itto scroll throughtabs
where the textinformationismore thanthe available screen-space permits.
23. The Map Menu isuseful whenyouwanttonavigate youritineraryinamore visual way. The firstsetting
you’ll see willlooklikethis:
The itemson yourItineraryappearinthe ordertheywere arrangedfromthe PlannerMenu;clickingon
any of themwill shiftthe mapaccordingly(showingthe locationclicked). The complementaryimage
appearingonthisscreenshotallowsthe usertomore quicklyrecognizetheirlocation.
Double clickanywhere onthe mapandyou’ll geta full screenmapthat overlapsall the menuitemsand
images. A single tapon the map will cause the screenshownhere toreturn. To scroll the map,zoomin
and zoomout,you woulduse the standardhandgestures.
24. Usability Test Results
Overall Ratings
The ratings listedinthissectionare dividedintotwotables:one forthe sectiononUsability,and
anotherforthe sectiononFunctionality. Eachtable liststheirrespective questionsalongthe first
column,five columnstorepresentthe 5-pointratingscale thatwasactuallyusedonthe survey,aswell
as columnfor calculatingthe meanandpercentage.
The followinganalysisreportsweretakenfromatotal of 8 testers(upfrom4 in a previousdocument).
We will be continuallyupdatingthe documenttoshow the latestresults. Evenwiththe little data
collected thusfar,we were able togeta fairlyreliable analysis. The testersprovideduswithgreat
feedback,andplentyof suggestionsonwhataspectsof the interface mostneededmodification.
Demographic Impact Analysis
The firstfour participantstoturn intheiranalysiswere betweenthe ages31 – 49; three of themwere
female. The remainingfourparticipantswere twomalesbetween20 – 40, and twofemalesover50
yearsold. This lattergroupcomposedof mixedage andsex groupswe thoughtmightserve toprovide
some analysisonthe DemographicImpactdata collected.
Afterlookingthroughthe data,we foundthatonlya few differencesweresufficienttowarrantnotice.
The followingTables were createdtoexplainthe analysis:
UsabilityQuestion1: Overallthe interface was easyto use
Age Group Female
Participants
Male
Participants
Score
Given
20 - 30 0 2 3
31 - 49 3 1 Mixed
50+ 2 0 2
2 of the remaining4testersreturnedascore of two(lowerscore thanany of the previoustesttakers).
Both participantswere overage 50 and bothwere female. The reasontheygave for the lowerscore
here had todo withthe colors,whichtheybelievedwouldmake navigationmore difficult. The two
remainingmale candidateswere under30; theyprovidedascore of 3.
Althoughthe differenceinscore betweenthe twogroupswasveryslight, we believethatage and
genderplayedarole intheirjudgement,especiallysincethe reasonthatthe youngermalesgave for
providingthe lowerscore hadnothingtodowithcolor. Instead,theyaddedtothe complaintsabout
category.
The overall score forthisUabilityParameterwasloweredfrom3.75 to 3.125.
25. UsabilityQuestion3: Howdid youlike the categories forbrowsingMiamiAttractions?
Interestinglyonthisquestionthe remainingparticipanttestershadprovidedahigherscore,andhere
we were hard pressedtounderstandthe relevancyof age difference,since boththe olderandyounger
groupprovidedsimilar(nottomentionhigherthanall previous) scores. Atfirstwe believedthe age
range playeda majordifference;since the olderparticipantswere somewhatindifferenttothe
categorizationwhenaskedaboutwhytheyscoredastheydid,we thoughtthattheysimplyhadlower
expectations;however,the twoyoungestrespondentswere alsoindifferent,andasmentionedbefore,
theyprovidedhigherscores.
On the otherhand we lookedatthe primarylanguage. Itwas the onlydata that seemedlikeitcould
have affectedthisquestion.
3 of the 4 participantsthatprovidedlate responseswere thosewhose primarylanguage wasaforeign
language,and theywere the oneswhoreturnedthe highestratingforthisquestion. Theirindifference
to the categorization,then,we thoughtcouldbe relatedthe factthatEnglishwasnot theirfirst
language.
The rest of the testresultsandsubsequentanalysiscan be reviewedinthe nextsection.
Age Group 1st English 1st Foreign Score Given
20 - 30 1 1 Mixed (3,4)
31 - 49 3 1 Mixed (1,2)
50+ 0 2 3
26. Usability Results
Please note thatchangeshave beenmade tothe Miami Digital TouristKiosksince the followingresults
were turnedin. Inother words,the followingtestsare notrepresentativeof UserFeedbackonthe
systemdepictedbythe imagesthatare providedthroughoutthisdocument.
QUESTIONS 1 2 3 4 5 Average
Overall the interfacewaseasy to use 2 3 3 3.125
I was able to find everything I waslooking for 1 2 3 2 3.75
How did you like the categoriesfor browsing
Miami Attractions
1 3 3 1 2.5
The information provided for available locations
were appropriate
4 4 1.5
Transactionsbetween menuswere fluid 7 1 4.125
The fontsused were easy to read 1 2 4 1 2.65
The wording ofinstructionsprovided wassimple
to follow
3 5 3.625
Voice recognitionworked like acharm n/a n/a
Returning to Previousmenusand starting over
was easy
n/a n/a
Shortcut key-comboswere easy to remember n/a n/a
The biggestcriticismforthe Usability Sectionof the interface was,notsurprisingly,relatedtothe
informationprovidedandthe categoryoptionsunderwhichtheywerepresented. The information
providedwasquite simplyincomplete. Asforthe category options,there were plentyof great
suggestionsofferedatthe endof the survey,andthese appearonthe Recommendationssectionof this
document.
[please see sectiononRecommendationsfor ProposedChanges]
27. Functionality Results
QUESTIONS 1 2 3 4 5 Average
How difficult wasit to find the specified locations 4 5
How difficult wasit to add itemsto the itinerary 4 5
How difficult wasit to deleteitems 2 2 4.5
How difficult wasit to print the itinerary 1 3 3.75
The most pleasantof all surprisescomingfromthe surveysthusfarcollectedoccurredinthissection,
where functionality wasnearlyratedwithaperfectscore (note the lowestscore wasa 3.75).
Recommendations
Upon completionof the tasks,participantsprovidedfeedbackforwhattheylikedmostandleastabout
the digital touristkiosk,andtheirrecommendationsforimprovingthe applicationwere verywell
thought-out.
The lowliestratedfeature of the appwasalsothe one where testrespondentshad the mostfeedbackto
provide. Theyall agreedthatmore informationneededtobe provided(evenif asgrandgeneralizations)
to make the app trulyuseful. Theyeachhadseparate ideasasto what wouldconstitute abetter
categorization,andwe are nowwaitingonthe resultscomingfromothertesttakersinorder to make a
decisiononwhatnewcategorizationwill be implementedforthe final draft.
Additionally,there wasone respondentwhosuggestedthatthe colorswere notat all pleasing,andeven
distracting. Thatone respondent,however,alsorevealedthattheirdistaste forthe colorsmayhave
beenrelatedtotheiraffiliationtoa sportsteamaffiliation. Thisobservationmaynonethelessbe worthy
of considerationasthere isa goodchance that othersportsfansmay have the same reaction.
The most likedfeature wasthatof Addingselecteditemstoan itinerarythatcouldbe printed. All
testersagreedthatthe compact layoutdidwell toinclude alotof functionalitywithinasmall amountof
space,and ina way that theyfoundwasveryeasyto grasp. On the otherhand,as much as theylikedit
(perfectscore),twoaskedthatanotherscreenbe developedforseeingadditional detailsforlocations
listedinboth,the Itineraryaswell asthe planner screens. Simplyclickingonthe itemscouldhave a
similareffecttothatof the map,where double clickinganywhere onthe mapwill allow userstohave
the entire screenoccupiedbythe map.
28. Final User Interface Design
The primaryconcern forthe developmentof the Miami Digital TouristKioskwasraisedbythe
participantsof the UsabilityTesting. Theirmainfeedbackwasrelatedtowhattheyidentifiedasa lack of
relevantinformationandpoorcategorization.
Testresultswere notall returnedatthe same time. The firstsetwas composedof justhalf of all the
participants,andwithinthatgrouponlyone hadraiseda questionaboutthe colorof the userinterface.
However,whenthe newtestresultswere returned,itbecame clearthatthe color scheme waseven
more importantthanbefore. Most simplydidnotlike the colors,butthe latersetof participants
informedthat,forthem,colorwasnot onlyunattractive,butalsoa problemfornavigation.
In orderto meetwiththe newexpectations,we hadtomake changestothe existingprototypes.These
changeswere basedonuserfeedbackgatheredfromthe UsabilityTestsasmentionedearlier. A
discussionregardingthe changesmade tothe documentwill follow.
New categorization:
The most confusingaspectrelatedtothe original categorizationprovidedinthe firstmock-upwasthe
optionforrestaurants,whichusersbelievedwouldhave excludedmanyplacesof interestslike Cafes,
and take-outonlycateringservices. Theysuggestedamore genericoption,andwe followedthroughon
that suggestionbychangingthe oldcategoryoption“Restaurants” to“Dining”soas to include other
eateries,assuggestedbyparticipants.
Anotherchange tothe listwasthe inclusionof Cinema(missingfromthe original list). Some of the
participantsexpresseddisbeliefinournotincludingthisoption. Theydidnotthinkthatitwouldbe
appropriate tolistCinemaunderBarsand NightLife,understandably(afterdue consideration).
Participantsalsoasked fora categoryfor Artsand Culture,whichtheypreferredtothe more specific
Landmarksand Museums;andtheyfoundthat optionsforcruise andshoppingcouldnotbe leftoutor
includedintoothercategories. The final listwasaresultof these andotherconsiderations:
New Category List:
Arts andCulture
Tours and Events
Beaches & Water Sports
Cinema
Bars and NightLife
Dining
Shopping
Cruises
29. New Color Scheme:
The new color scheme wasselected withmore of aneye tomakingfora pleasurableexperience,instead
of the concernfor symbolicmeaningusedinthe firstprototype. We decidedthatthe primarycolorfor
Headerand Navigationshouldstill be strongenoughtoprovide agoodcontrastwiththe background
colors,whichwe nowhopedtomake easier onthe eyes(animportantlessonlearnedfromUsability
Testing);hence the newcolorswere asfollows:
Color Type Hex Code
Primary: Header Navigation
Secondary: Buttons
Background 1
Background 2
Color images taken from: http://hex.colorrrs.com/
30. New Screen for Selection Details
Probablythe mostimportantchange thatwe neededtomake inorderto satisfythe feedbackand
analysisphase of developmentwasthe additionof anew screentoprovide venue specificdetails. The
screenabove providesapreview of thisnew feature (describedinthe Interface Walkthroughsectionof
thisdocument).
The newscreenprovidesadditional detailsfor directorylistingsthatcanbe browsedusingeitherthe
ItineraryorPlannermenus. The tabbedregionprovidesinformationforuserstolearnmore aboutthe
selectedvenueandiscontextspecific. Forinstance,inthe above image,avideoispresentedinthe
multimediasection,butnotall listingswillhave avideotodisplay.
The Schedule Tabwas one of the main reasonsforcreatingthisnew screen,because mostof the
categorieswouldrequire ample roomfordisplayingadaily-weeklyschedule(acommonresponse from
the respondentsof the UsabilityTest).
Additional testingandmodificationwillhave tobe scheduledtocontinue improvingthe interface. The
latestresultsprovidedfromthe UsabilityTestingwere onlyhalfof the firstset,andso are not
representative of the newlydevelopedsystem. A secondUsabilityTestingforevaluatingthe newly
developedsystemwillhave tobe performed. Overall we are happytoreportthat the systemis
developingalongthe lineswe expected.
