What? Browsing Tuleap interface through an agreed-upon set of usability best practices. Usabilty requirements For Tuleap Open ALM - https://demo.tuleap.net/ Why? • Detect usability issues and address them to the team. • Share recommendations and guidelines with Tuleap developers to improve the overall user experience. Benefits • Highlights concrete usability issues that can be implemented. • Provides user stories for facilitating usability interview and testing. • Provides usability criteria that can be tested. 1 Key findings and recommendations 2 Prioritized with severity ratings 2 Detailed findings 7 Illustrated with screenshots and callouts 3 Executive summary 34 Test objectives, linked to the product’s business goals 4 Ressources 37 Well-known interface design rules and usability guidelines Contents at a glance Tuleap interface inspection
37
Embed
Tuleap interface inspection€¦ · 13/2/2013 · • Detect usability issues and address them to the team. • Share recommendations and guidelines with Tuleap developers to improve
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
What?Browsing Tuleap interface through an agreed-upon set of usability best practices.
Usabilty requirementsFor Tuleap Open ALM - https://demo.tuleap.net/
Why?• Detect usability issues and address them to the team.• Share recommendations and guidelines with Tuleap developers
to improve the overall user experience.
Benefits• Highlights concrete usability issues that can be implemented.• Provides user stories for facilitating usability interview and testing.• Provides usability criteria that can be tested.
1 Key findings and recommendations 2 Prioritized with severity ratings
2 Detailed findings 7 Illustrated with screenshots and callouts
3 Executive summary 34 Test objectives, linked to the product’s business goals
4 Ressources 37 Well-known interface design rules and usability guidelines
2. Serious problem—userisfrustratedbutgetsthroughit;suggeststhatothersmay be less inclined to put up with the inconvenience or that frustration level will be high.
Then you could add a sidebar menu (on the left or on the right) and provide access to sections like:
Oneoftheimmediatebenefitofthiscandidatesolutionwouldbesimplifying navigation and providingasingleentry(“Mydashboard”or“Personaldashboard”).Itwouldaslocontributetoimprove content accessibility and organization.
Personal info
Name,photo,timezone,password,personalskills...
Account settings
Notificationscenter...
Tuleap general settings
Appearance and layout, widgets...
SSH Keys
Projects (or repositories) contributed to
Contribution activity (filtered by day, month, etc.)
Frommypersonaldashboard,Ienter“design”keywordinthe search bar and press “enter” on my keyboard.Imakeatypo(‘deisgn”),butIdon’tseeitatoncebecausesearch doesn’t provide any suggestion or alternative matches.
No results are found,butIhaven’taclearexplanationwhy.Where’sthewayout?Inexactmatches,tipstoimproveresults,orlinktootherpagesarenotshown. I don’t use search filter because I’m already in the right place(“Softwareprojects”),andI’mnotsurtounderstandthelinkbetween“Softwareprojects”,“People”and“Fulltext”.
1 2
3
As my query remains in the search bar, I see my error andtype“design”correctly.Butthere’sstillnotmatchfound.Ismydesigntasknowheretobefoundontheapplication?
Usablity requirements for Tuleap | https://demo.tuleap.net/ | [email protected]
Tuleap Open ALM | Usability requirements | Feb. 2013
4
Iknow“task”isatrackersoIgoto“Trackers”page.Ittakesthree clicks:“mypersonalpage>>playgroundproject>>trackers”. ThenIselectthe“Crosstrackersearch”tab,andseewhatI’vebeenlookingfor:an advanced search offering form field and filtering tools to narrow results. But I don’t understand why it’s a tab (and notasearch)thatenablemetomakemyquery. Then I don’t sift through the tracker treebecauseIdon’tthinkI’llfindtherighttaskinallthisnoise.
4
In the end the application provides the ability to achieve my goal: I can enter my most important criteria(taskname),getmorespecficwithfilteringtools,andfindthetaskIwaslookingfor:“Designparametersandsettings”.Thenmaybesearch result could be more visible. But the experience remains confusing: why was rapid search not directly connected to advanced search(whereIcanbrowseprojects,trackers,etc.),soIcouldfindmytaskrightaway?
Frommypersonal dashboard, I see only one project in “Myprojects”box.Widget titles are not visible, but public/private status is as visible as the project name. It distracts mefromselecting“Playground”projecttoseewhat’sinside.
Fromproject dashboardpage,I’mlookingforawaytoadd an agile dashboard to my project, but there’s a lot of options in navigation menu. Then I use mouse hover on labels to see if a tooltip would help.
1 2
3
Tootltip takes a long time to appear. I don’t understand what“PlanMode”labelmeans,but“Agile dashboard” appeals.
I’m in the agile dashboard page. I see well-known notions likerelease,sprint,userstories,butIcan’tfigurewhaticons mean without tooltip. And I don’t understand why header rows are visible while there’s no data in the table. Idecidetoselect“Accesstocardwall”icontocustomize card wall to Scrum process.
Usablity requirements for Tuleap | https://demo.tuleap.net/ | [email protected]
Tuleap Open ALM | Usability requirements | Feb. 2013
5
IknowI’monasprint page because of page title. But I’m not guided by the breadcrumb, because it’s too small, not visible and positioned under two navigation levels (there’s too many options at the same place). I see familiar notionslikecardwall,burndown,backlog,andIcannavigatethroughitwithtabs. Howeverittakestimetolocatethe“configure” card wall optionlinkbecauseit’stoosmallandnotvisible.
NowI’min“Tracker”andthere’safourth navigation level withlotsofoptions.It’sconfusing,butIfocusonmytaskandstartconfiguringmycardwall. AtthisstepIdon’tknowwhat“Status Semantic” refers to, and many unavailable options appear on the interface (but maybe i’ts because I’m in the demo). Then I scroll to findthe“submit” button. It’s small and not visible, but recognizable because standardized.
6
An alert informs me that the values have been changed. I thought success alert would be green because I’m used to this color code (and blue would be for information alerts). MostlyIexpectedtoberedirectedtomysprintcardwallinordertoseemychangesincontext.How can I access it?There’sapparentlynodirectlinktomycardwall,soIdecidetogocheckwhat’sin“Trackers” section.
26 Tuleap Open ALM | Usability requirements | Feb. 2013
Usablity requirements for Tuleap Open ALM | https://demo.tuleap.net/ | [email protected]
Customize a project dashboard ContinuedStory: as a new user, I want to monitor my project with an agile dashboard.
There’salotofdifferenttrackers,somewithassociated vocabulary(“bugtracker”)orfamiliar notions, but most descriptions duplicating titles is misleading. “Delete” icons are recognizable but redondant, and tooltip on mouse hover repeats some of the informations locatednexttothetitleandhidespagecontent.“Agile” keywordmakesmeselect“user stories”link.
A warning alert informs me that the report has been modify. Yellow color code seems relevant, but maybe the warningsigniconisexcessive. “Options” dropdown doesn’t seem to be related to the action“savethecurrentreport”.Isthisactionimportant?Will I lose data? If so, re-organize optionstodifferentiate“save”,“saveas”,“setpublic”,anduseavisiblebutton dropdown,forexample:
And if not, remove the dropdown. In the alert, I can also see who made the modifications withalinktothedeveloper’sprofile.FinallyIchoosetoload my new report.
8 9
There are four navigation levels, and current tracker is not visible (breadcrumb’s small font size). I don’t understand the logical links between labels:“Createanewartifact”,“Notifications”,“Administration”,and“Help”. Forexample,whyisnotificationhere,andnotgroupedwithaccountsettings?Whydoescontextualhelphaveanotherconventionofwriting(notaquestionmark)? “Create new artifact”linkisnotvisible.Itseemstobeanimportantandrecurrentaction,somakeitabigbutton(withabig“+”insteadofsmallicon).
Usablity requirements for Tuleap | https://demo.tuleap.net/ | [email protected]
Tuleap Open ALM | Usability requirements | Feb. 2013
Whenexpanded,default menu occupies a third of my screen while the interesting part is my cardwall.And“+/-”iconsduplicatedropdown. Because of its opacity, “Toggle criteria” pop over seems to include cardwall printer version option:
10
10
Cardwall design is clear and readable.Isthereacolorcodeforthedifferententries?Isitrepeated on the interface?
I can add a new tab or drag and drop tabs, but if I haven’t saved my session I lose tabs re-organization when I reload the page. Having a warning alertaftereachmodificationismisleadingandredundant. On columns options, do I need a button to validate my selection? The “options” dropdown toprinterversionismisleading,makeitaprinticon? “Freehand drawing view” is not an important feature, and it’s relevant to have it not visible (light gray).
From“Trackers”page,Iclickon“Createanewtracker”link.I’d rather have a big visible button to see it at once.
I select “playground” project and choose the “Task” template because I want to create to dos. I understand thatallfieldsaremandatorybecauseoftheredasterisks.MaybetheshortnameisforthetrackerURLbutI’mnotsosure.
1 2
3
Ididn’ttakethetimetoreadtheshortnamefielddescription and I made an error. I don’t understand the error message,whereisthe“back button”andwhatisan“unreservedreference”?ThenIenter“todolist”(thankstothedescription)andclickon“create”,butnothinghappensand I understand I have to use my browser’s back button.
4
ThenIgobackandclickonthe“Create”buttonagain,buthere comes another error message: the to do list already exists.Somytrackercreationhasbeentakenintoaccount,but instead of success I get an error message? Then I go backtomytrackerpageandcheckmytodolisthasbeencreated.
Browsing Tuleap, a full free Open Source Suite for ALM (Application Lifecycle Management), through an agreed-upon set of usability best practices. This interface evaluation of https://demo.tuleap.net was completedonFebruary13,2013,asapreliminarystepin the preparation for user interviews and usability tests of the software.
What for?
The purpose of this interface evaluation is to discover, throughatask-orientedprocess,potentialusabilityissuesthat might confuse users. Sharedwiththeteam,thefindingswillbeusedtodesignappropriate screeners and scenarios (or stories) for user interviews and usability tests.
Who are Tuleap users?
Main Tuleap users are:
Developers
Projectmanagers
Agilers
Quality managers
Business analysts
As Tuleap is an open-source forge, it could also attract members of open-source community. In which case users could be passionate collaborator, or people reporting bugs.
How is this evaluation made?
The interface was evaluated from a new user’s point of view. In preliminary steps, I reviewed the overall structure and content of Tuleap and determined my stories, which are the processes of:
•LoginTuleapDemoPlayground
•Configuremyprofileandaccountsettings
•Searchaspecifctaskrelatedtodesign
•Monitormyprojectwithanagiledashboard
•Createanewtrackerfororganizingfeatures
The interface was evaluated based on a combination of well-knowndesigninterfacerulesincludingJakobNielsen’s10heuristics and Bastien & Scapin usability guidelines. In a follow-up meeting, Enalean team and the UX designer will compile their evaluations on Tuleap interface on a single report made public to the community.
The type of rating scale used for this evaluation is detailed below.
Of course, positive findings are listed with their related usability categories. They don’t need a severity scale, but they’re organized according to their impact on the user’s experienceaswell.
Detailed evaluation process
Theevaluationisatask-orientedanalyzis,basedonusability guidelines, and has four fundamental phases - browse the interface, list the actions, prioritize actions, then think about them:
Browse the interface to have an overview of the overall
2. Serious problem—userisfrustratedbutgetsthroughit;suggeststhatothersmay be less inclined to put up with the inconvenience or that frustration level will be high.
36 Tuleap Open ALM | Usability requirements | Feb. 2013
Usablity requirements for Tuleap Open ALM | https://demo.tuleap.net/ | [email protected]
Executive summary ContinuedProduct’s business goals, hypotheses on Tuleap usability goals and next steps
Global vision of Tuleap
Tuleap is a full free Open Source Suite for ALM (Application Lifecycle Management) that brings together every software engineering tools in a single integrated and secured platform.
Main strength Freelicense,flexibilityandcustomization.
Weak points •Large historic code base, with all that that implies both in code and interface usability. •Cost entry: the advantage of Tuleap is that it’s customizable, the disadvantage is that you have to customizeitalotbeforemakingthesoftwaresuitabletoyour own scenario.
Summary of user experience
Overall I can do what I want, and even more because I can customize things to my own process. So it’s not ergonomic, but it’s usable. Even if I’m often drowning in the interface (lots of navigation levelsandinformations),Ifinallyfindawaytoachievemytask.The major obstacles encountered are: 1. Staying focus—whenImanagemytasks,Idon’twantto have navigation menus occupying 50% of my screen. And therearelotsofthingsvisibleonpages,soit’sdifficulttostay focused on what I’m doing. 2. Cost entry & learnability—thetimeittakestosetthetooltodowhatIwantistoohigh.Seemslikeyouhavetobeapowerusertoachieveyourgoalsquickly. 3. Consistency & standards — there is a contrast between someinterfaceelements.Forexample,cardwallsectionismuch clearer than the above section (navigation mainly). And a lot of labels and icons are redundant or not logically grouped, or misleading.
Hypotheses on Tuleap usability goals
The evaluation of Tuleap interface revealed that there are a number of usability issues that can be test with participants. Testing the three major issues andfixthem would contribute to solve a lot of users’ current problems?
Tracking seems to be the most important feature of the software. You might create a project once or twice, but youusetrackerseveryday.Asusersspendmostoftheirtimeusingtrackers,weshouldfocusonthisfeature.
Flexibility and customization are the major added valuesofTuleap.Thenextusabilityscenariosshouldfocusonthesekeyaspectsofuserexperience.
Thenworkingontheusabilityofadefault template, and makingitreallyattractiveasadefaulttemplate,couldlower cost entry and promote Tuleap adoption?
•Guidance:prompting,grouping/distinctionofitemsbylocation and format •Workload:brevity(concisionandminimalactions)andinformation density •Explicitcontrol:explicituseractionandusercontrol •Adaptability:flexibilityanduserexperience •Errormanagement:errorprotection,qualityoferrormessages, error corrections •Consistency •Significanceofcodes •Compatibility