Tuleap interface inspection€¦ · 13/2/2013 · • Detect usability issues and address them to...

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

Contents at a glance

Tuleap interface inspection

https://demo.tuleap.net/

2 Tuleap Open ALM | Usability requirements | Feb. 2013

Usablity requirements for Tuleap Open ALM | https://demo.tuleap.net/ | [email protected]

Keyfindings&recommendationsPositivefindingsandusabilityissuesprioritizedwithseverityratings

Positive findings

Guidelines Severity rating GuidelinesPositive findings+ Icanchoosepreconfiguredtrackertemplateslike“Tasks”

to create my to do list.

Workload: brevity

Adaptability:flexibilityand

userexperience

I can customize the cardwall tool to my process. Workload: brevity


userexperience

In the end the application provides the ability to achieve

mygoal:Icanentermymostimportantcriteria(task

name),getmorespecificwithfilteringtools,andfindthe

taskIwaslookingfor:“Designparametersandsettings”.

Workload

Cardwall design is clear and readable. Guidance: grouping/

distinction of items and

legibility

Workload: brevity and

information density

Aesthetic and minimalist

design

Well-knownandassociatedvocabularyhelpmefindmy

way on the interface.

Guidance: legibility

Consistency and standards

In my cardwall, I can drag and drop tabs to organize them. Adaptability:flexibilityand

userexperience

. . . . . .


3

Usablity requirements for Tuleap | https://demo.tuleap.net/ | [email protected]

Tuleap Open ALM | Usability requirements | Feb. 2013

Positive findings (Continued)

Guidelines Severity rating GuidelinesPositive findings+ Contextual help is a good way to resolve issues and

answer questions on the same page they arise.

Mightbeagoodideatoaskusersifthequestionmark

linkisclearenough.

Help and documentation

Navbarmenuandfooterofferahelp section with clear

link to it, and a human fallback plan (email). Might be a

goodideatoaskcustomersiftheyactuallyusehelplinkin

the nav bar.


Select on hover highlights the navigation label. Guidance: immediate

feedback

Textiseasytounderstand,withaclearheadline,andthe

most important informations.

Bigpagetitleandabriefdescriptionhelpmeknowwhat

I’llfindontheinterface.


I can have a printer version of my cardwall. Guidance: legibility


userexperience

Informsection,redasteriskshighlightrequiredfields. Significance of Codes


Icanpress“enter”onmykeyboardtovalidateaction. Workload: brevity and

minimal action

Inmycardwall,entrieslike“New,Analyzed,etc.“havea

colorcodetodifferentiatethem.


Recognition rather than

recall

Warning alert color respects standards. Consistency and standards




Keyfindings&RecommendationsContinued

Guidelines Severity rating Recommendations

There are too many horizontal

navigations: nav and subnav with lots

ofoptions,breadcrumb,toprightlinks,

pagespecificactions...

Guidance: grouping/

distinction of items

and legibility

Workload: brevity

and information

density

Consistency and

standards

• Re-organizeandsimplifynavigation,

forexamplebyaddingasidebarmenu

relevantly re-grouping items? And is

breadcrumb so useful?

Some navigation labels are not obvious,

andsometimetheyaremisleading(like

“Planmode”,“options”,...).

Some sections don’t seem logically

groupes(“Apparencesettings,“Account

maintenance”and“Preferences”...)


Consistency and

standards

• Testnavigationlabelsrelevancewith

users, to see if they clearly understand

them.

Theoverallsearchexperienceis

confusing:

Why was rapid search not directly

connected to advanced search (where I

canbrowseprojects,trackers,etc.),soI

couldfindmytaskrightaway?

Having an advanced search feature in a

tab is misleading.

Guidance: grouping/


and legibility

Workload: brevity

and information

density

Consistency and

standards

• Providearapidsearchandalinktoan

advanced search in the same module.

• Merge“Crosstrackerssearch”to

advanced search page?

• Removesearchfilterlocatednexttothe

search bar?

• Removetrackerstree?

No results are found, but I haven’t a

clearexplanationwhy.

Explicit control

Error management

• Provideexplanationsoninexact

matches, search suggestions, tips to

improveresults,orlinktootherpages

(personaldashboardforexample).

. . . . . .

3

Usability issues to improve

Issues to improve-

3

3

3


5



Usability issues to improve (Continued)


In“Trackers/userstories”(tracker

configuration),awarning alert appears

eachtimeImakeamodification.

Explicit control • Don’talertuserwhenhe’sconfiguring,

itfreezeshisworkflow(butmaybeit’sa

demo bug and it’s not so important).

Errormessagesarenotexplicit.

Andevenifit’sa“can’tmiss”error

message,Ican’tfindthemessageatonce

because it doesn’t appear under the form

field.

Guidance: grouping/


Error management

• Positionerrormessageunderitsrelated

formfield,andprovideexplicittipson

howtocorrecterrors.Don’tmentionthe

browser’sbackbuttonsinceit’snoton

the interface?

Search results are not visible (small font,

lackofcontrast).


Recognition rather

than recall

• Makeitvisiblebyincreasingfontsize

andcontrast.Removeexpand/collapse

option?Isthetrackertreesouseful?

Breadcrumb is too small (small font,

lackofcontrast).Andsubnavfirstlabel

is misleading because of its stripes:

“Playground >>”


Recognition rather

than recall

• Makeitvisible:increasefontsizeand

addmorecontrast.Removesubnavfirst

label stripes?

Current tracker or navigation are not

visible(lackofcontrast).

Guidance:

immediatefeedback

and legibility

Recognition rather

than recal

• Makeitvisiblebyincreasingcontrastor

adding colour?

Important actionslike“Submit”,“Submit

newartifact”,“Createanewtracker”or

“Configure”aretoosmallandnotvisible

(smallfontandicons,lackofcontrast).

Guidance: prom-

pting and legibility

Recognition rather

than recall

• Makeitavisiblebutton.

In“Trackers/userstories”reloading

withoutsavingmakesmelosetabs

organization.

Explicit control • Keepmychangeswithoutsaving?

. . . . . .

Issues to improve-

2

2

2

2

3

2

3




Keyfindings&Recommendations


Iexpectedtoberedirected to my sprint

cardwallafterconfiguringit.

Workload: brevity

Adaptability:

flexibilityanduser

experience

• Redirectmetothecardwallandletme

seemychangesincontext?Providea

contexutallinktomycardwall?

Login/sign-in and search options are

positioned in the same group of item,

whichmakesithardtodifferentiate.

Guidance: grouping/


Consistency and

standards

• Align items to eliminate non-logical

hierarchy? Add margin/padding to

separate items? Differentiate“Login”

and“Sign-in”optionsusingdifferent

colours?

Inmy“Agiledashboard”page,Ihavean

empty table with header rows.

Workload:

information density

• Don’tshowcontentifit’snotavailable.


Issues to improve-2

2

2

Severity rating scale — 3-point severity rating

3. Catastrophe —usercannotcompletetask;orusercancompletetheprocessbutexpressesextremeirritationattheprocess;oruserneedsassistance(businessgoalistomaketheprocessflexibleandindependentofuserassistance).

3

2. Serious problem—userisfrustratedbutgetsthroughit;suggeststhatothersmay be less inclined to put up with the inconvenience or that frustration level will be high.

2

1. Cosmetic problem—usermayhesitateorpickthewrongoption,butusercorrectsitwithoutincident;oruserexpressesminorirritationorannoyance,but itdoesn’taffectabilitytocompletetasks.

1


7



1 Login Tuleap demo playground 8

Contents

2 Configure profile settings 11

As anewuser,Iwanttoconfiguremyprofileandaccountsettings

3 Search trackers 20

As a new user, I want to search a specifc task related to design

5 Track everything related to a project 32

As a new user, I want to create a new tracker for organizing a to do list

4 Customize a project dashboard 24

As a new user, I want to monitor my project with an agile dashboard

DetailedfindingsFindings prioritized and illustrated with screenshots and callouts




Story: as a new user, I want to login Tuleap demo to start browsing the interface.

Login Tuleap Demo Playground

1


On hover, I lose focusonsearchfilter. Explicit control • Fixthefocus,ormakefilterpermanently

visible? Or place the dropdown in the

search bar?

Search bar is small and not visible. Guidance: legibility

Recognition rather

than recall

• Makeit visible (add margin/padding,

increase width)?

2

1

Search

7

2

21

3

4

5

6

Issues to improve-


9



2


Login/sign-in and search options are

positioned in the same group of item,

whichmakesithardtodifferentiate.

Their hierarchy doesn’t represent a

relevant functional organization :

search action is not logically related to

login action.

Guidance: grouping/


Consistency and

standards

• Align items to eliminate non-logical

hierarchy?

• Add margin/padding to separate items?

• Differentiate“Login”and“Sign-in”

optionsusingdifferentcolours?

I want to login, but I’m distracted from

my goal by a red alert (‘not logged in’),

and unavailable options in navigation

menu that redirect me on the same login

page.

Worlkload: brevity

and minimal actions

• Eliminateunavailableoptionsandtextnoise?

• Enhance login/sign-in options in order to call to action?

2

Navigation

3

Guidelines

Typography

4


Evenifit’sa“can’tmiss”errormessage,

Ican’tfinditatoncebecauseitdoesn’t

appearundertheformfield.

Guidance: grouping/


Error management

• Positionerrormessageunderitsrelated

formfield.

Form section

Textiseasytounderstand,withaclearheadline,andthe

most important informations.


Issues to improve-

Issues to improve-

Positive findings+

1

2




Login Tuleap Continued

Positive findings+

Issues to improve-

Issues to improve-

5


“Login”button,likeeverybuttonsonthe

interface, are small and not visible.

Guidance:

prompting and

legibility

Recognition rather

than recall

• Usebigcolouredbuttoninordertocall

to action.

• Addmorepaddingtoenlargeclickzone

and improve control.

• Whilestyling,standardizebuttonsto

ensure coherence and consistency.

Button

6 Help

Guidelines

Navbarmenuandfooterofferahelp section with clear

link to it, and a human fallback plan (email). Might be a

goodideatoaskcustomersiftheyactuallyusehelplinkin

the nav bar.


7


Ican’tread“OpenALM”tagline because

fontistoosmallandlacksofcontrast.

Guidance: legibility • Removethetaglinewhenlogoistoo

small.

Logo

2

1


11



Story: as a new user, I want to configuremyprofileandaccountsettings.

Configureprofilesettings

1


I’m now connected as LVance, I can

logout or bookmark the page. I’m not

sureIunderstandthelinkbetweenthe

two actions.

Guidance: grouping/


Consistency and

standards

• Isthebookmarkfeatureuseful?What’s

thedifferencewiththebookmarkaction

in my browser?

Navigation links

1

2

3

4

5

Issues to improve-2




ConfigureprofilesettingsContinued

2


There’s three navigation levels on this

interface:topnavlinks,navbarand

subnav. Too many navigation options act

as an obstacle.

Hierarchy between nav bar and subnav

is hard to understand because options

are not grouped.

Guidance: grouping/


Workload: brevity

and information

density

Consistency and

standards

•Questions you could ask to simplify

navigation:

Is the actual home page relevant?

Wouldn’t I prefer “my dashboard” as a

home page, to see all project activities

at a glance when I enter Tuleap?

“Account maintenance” and

“Preferences” options are related to

my personal account settings, is it

relevant to merge these pages?

Add a button“Editmyprofile”atthe

top right of the page? Add a link to my

settings on my account name?

The current location (in both nav

and subnav) isnotsoobvious(lackof

contrast).

Guidance:

immediatefeedback

and legibility

Recognition rather

than recall

• Enhancecurrentnavigationwith

contrast, colors, visible select, etc.

Navigation label “My personal page” is

not clear: is this a page that will show

my personal infos to other people in the

forge?


Consistency and

standards

• “Mydashboard”seemsmorerelevantto

name the place where I can consult my

personal dashboard, and manage my

account settings.

Navigation menu bar

Story: as a new user, I want to configuremyprofileandaccountsettings.

Issues to improve-

Guidelines

Select on hover highlights the navigation label. Guidance: immediate

feedback

Positive findings+

3

2

2


13



3


DoIneedanalert with date and time to

inform me I’m logged? The account name

at the top of the screen already informs

the user he’s logged.

Workload: brevity

and information

density

Explicit control

• Removethealertand redirect to

personal dashobard?

Success alert

4

Guidelines

Contextual help

5

Guidelines Severity rating

Typography

Contextual help is a good way to resolve issues and

answer questions on the same page they arise.

Mightbeagoodideatoaskusersifthequestionmark

linkisclearenough.


Issues to improve-

Positive findings+

Guidelines

Bigpagetitleandabriefdescriptionhelpmeknowwhat

I’llfindonthisinterface.


Guidelines Severity rating

Recommendations

It’shardtodifferenciatecodes

(“[A]ssignedor[S]ubmitted”)fromtext

description.

Significance of

Codes

Recognition rather

than recall

• Makititvisiblewithcolour,contrast,icon?

Issues to improve-

Positive findings+

1

2




Account Maintenance page

1

3

2

3

1


User name is repeated twice in the page

title and the description.

Workload:

information density

• Removethedescriptiontosavesome

space on the screen?

Text description

Issues to improve-

ConfigureprofilesettingsContinuedStory: as a new user, I want to configuremyprofileandaccountsettings.

2


Whatisthedifferencebetweenmy

profileand“Developerprofile”?

Guidance: grouping/


• Merge“Developerprofile”toprofile?

Contextual navigation

Issues to improve-

3

2

1


15



2


Whatisthedifferencebetweenmy

profilepageandmy“Skillspage”?

Guidance: grouping/


• Merge“Skillspage”toprofilepage?

Contextual Navigation (continued)

Issues to improve-

3 Form sections


There’s unused empty space between

labels,profileinformationsandeditlinks,

so it’s hard to read.

Guidance: grouping/


and legibility

• Reducewhitespacebetweenitems?

Font weight and small line height on

profileinformationmakeitveryhardto

read.

Some labelsaredifficulttounderstand:

abbreviation(“EmailAddr”),non-standard

(“Tuleapname”insteadof“username”,

but maybe users understand it so it’s not

so important?)

Guidance: legibility • Styletexttoenhancelegibility.

• Checkifusersunderstandlabels?

Contextualedit links are redundant. Workload:

information density

• Editlinkappearonhoveronly,styled

withaniconand/oran“Edit”label?

There’s unused empty space aside the

avatar.AndisitthefirstinformationI

want to see or edit?

Guidance: grouping/


• Reduceavatar’ssize,andposition it

belowprofileinformations?

Issues to improve-

2

2

2

1

1




Preferences page

1


Sections titles are not visible (small font,

lackofcontrast).

Check boxestextsandadditional

descriptions are on the same level.

Guidance: grouping/


and legibility

• Makesectionstitlesvisible.

• Re-organizeinformationhierarchy?

The “remember me at login” option

should be directly related to login action.

Guidance: grouping/


• Onlyshowthe“rememberme”option

at login?

Inthe“Tuleaplab”section,Idon’tsee

the“listedfeatures”announcedinthe

description. But maybe it’s because I’m in

the Tuleap demo so it’s not so important?

Workload:

information density


Check boxes and text

Issues to improve-


1

3

21

2

2


17



3


Why does the import/export contextual

helpredirectmeonthe“Account

maintenance”helpdocumentation?

Explicit control • Redirectonthe“Preferences”help

documentation(thenextone).

Contextual help

Issues to improve-2

2


What’sthedifferencebetween

usernames:“RealName,“LoginName”,

“Loginname(RealName”),“RealName

(loginname)”?

Guidance: grouping/


Consistency and

standards

• Clarifydenominations?Providename

examples?

Why are “Appearance settings”

separated from general settings and

layout customization?

Guidance: grouping/


• Merge“appearancesettings”to

“customize”optionspage?

Why are “language” options in

“Preferences”, while “timezone” options

arein“Accountmaintenance”?

Guidance: grouping/


• Merge“Preferences”to“Account

maintenance”andre-organizecontent?

Instant messaging options don’t

seem to be logically related to account

preferences.

Guidance: grouping/


• Instant messaging options should be

availableinthechatboxonly?

Import/export don’t seem to be logically

related to account preferences.

Is CSV format the only available?

Guidance: grouping/


• Showimport/exportoptionsincontext,

that is to say when I’m doing the action?

If other formats than CSV are avaiable to

import/export,makeitvisible?

Whatisa“normal”font size? Guidance: legibility • Provideapreview,anexampleofthe

font size?

Theme/color scheme has only one otpion

available, so it doesn’t need a dropdown.

But maybe it’s because in a demo?

Explicit control • Removedropdown?

Dropdown menus

Issues to improve-2

2

2

2

2

1




Account Maintenance page

Preferences page


Merge personal info and account settings?


19



Further recommendations

Tofixsomeoftheguidanceissues,youcouldre-organize“Accountmaintenance”and“Preferences”,andmergethemtotheactualpersonaldashboardpage?

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.)

Summary of pushes, commits...

. . . . . .




Story:asanewuser,Iwanttosearchaspecifictaskrelatedtodesign.

Search trackers

Cognitive walkthrough

Testingsearchfeaturestepbystepinanactionsequence,andextractingusabilityissues.

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?

ThenIdecidetospecifymyqueryandtry“designtask”and“designsettingstask”.AndIdon’tremembermytaskIDsoIcan’tuseitsnumbertofindit.Stillnowayout.


21



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?




Keyfindingsfor“Searchtrackers”

Positive findings

Guidelines Severity rating GuidelinesPositive findings+ In the end the application provides the ability to achieve

mygoal:Icanentermymostimportantcriteria(task

name),getmorespecificwithfilteringtools,andfindthe

taskIwaslookingfor:“Designparametersandsettings”.

Workload

Icanpress“enter”onmykeyboardtovalidateaction. Workload: brevity and

minimal action



Theoverallsearchexperienceis

confusing:

Why was rapid search not directly

connected to advanced search (where I

canbrowseprojects,trackers,etc.),soI

couldfindmytaskrightaway?

Having an advanced search feature in a

tab is misleading.

Guidance: grouping/


and legibility

Workload: brevity

and information

density

Consistency and

standards

• Providearapidsearchandalinktoan

advanced search in the same module.

• Merge“Crosstrackerssearch”to

advanced search page?


search bar?

• Removetrackerstree?

No results are found, but I haven’t a

clearexplanationwhy.

Explicit control

Error management

• Provideexplanationsoninexact

matches, search suggestions, tips to

improveresults,orlinktootherpages

(personaldashboardforexample).

. . . . . .

3

Issues to improve-

3


23




Search results are not visible (small font,

lackofcontrast).

And is expand/collapse option so useful?


Recognition rather

than recall

• Makeitvisiblebyincreasingfontsize

and contrast.

• Removeexpand/collapseoption?

In search filter I don’t understand

thelinkbetween“Softwareprojects”,

“People”and“Fulltext”.

Whatdoes“Fulltext”mean?Idon’tsearch

afulltext,Imakeafulltextsearch.

Guidance: grouping/


Consistency and

standards


search bar?

I don’t sift through the tracker tree

because there’s too much information

noise.

Guidance: grouping/


and legibility

Recognition rather

than recall

• Istrackertreesouseful?

If so, re-organize content and improve

legibility?

Andifnot,removetrackertree?

Ittakesthree clicks to go to “Trackers”

page:“mypersonalpage>>playground

project>>trackers”.

Workload: brevity • Add“Trackers”entryinthenavigation

menu bar?

• Makeprojectsmoreaccessible?


Issues to improve-

2

2

2

2




Story: as a new user, I want to monitor my project with an agile dashboard.

Customize a project dashboard


AtfirstIwantedtotestanotherstory:“createanewproject”,butIcan’tseeanyoptionontheinterfacetodoit. Thenmaybeit’sbecauseI’minademo,soIdecidetoplaywiththeactualprojectnamed“playground”.

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.

4


25



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.

7




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).

10


27



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).




Keyfindingsfor“Customizeaprojectdashboard”

Positive findings

Guidelines Severity rating GuidelinesPositive findings+ I can customize the cardwall tool to my process. Workload: brevity


userexperience

Cardwall design is clear and readable. Guidance: grouping/

distinction of items and

legibility

Workload: brevity and

information density

Aesthetic and minimalist

design

Well-knownandassociatedvocabularyhelpmefindmy

way on the interface.



In my cardwall, I can drag and drop tabs to organize them. Adaptability:flexibilityand

userexperience

I can have a printer version of my cardwall. Guidance: legibility


userexperience

Inmycardwall,entrieslike“New,Analyzed,etc.“havea

colorcodetodifferentiatethem.


Recognition rather than

recall

Warning alert color respects standards. Consistency and standards


29




There are too many horizontal

navigations: nav and subnav with lots

ofoptions,breadcrumb,toprightlinks,

pagespecificactions...

Guidance: grouping/


and legibility

Workload: brevity

and information

density

Consistency and

standards

• Re-organizeandsimplifynavigation,

forexamplebyaddingasidebarmenu

relevantly re-grouping items? And is

breadcrumb so useful?

Some navigation labels are not obvious,

andsometimetheyaremisleading(like

“Planmode”,“options”,...)


Consistency and

standards

• Testnavigationlabelsrelevancewith

users, to see if they clearly understand

them.

In“Trackers/userstories”(tracker

configuration),awarning alert appears

eachtimeImakeamodification.

Explicit control • Don’talertuserwhenhe’sconfiguring,

itfreezeshisworkflow(butmaybeit’sa

demo bug and it’s not so important).

Breadcrumb is too small (small font,

lackofcontrast).Andsubnavfirstlabel

is misleading because of its stripes:

“Playground >>”


Recognition rather

than recall

• Ifbreadcrumbisnecessary,makeit

visible: increase font size and add more

contrast.Removesubnavfirstlabel

stripes?

Current trackerisnotvisible(lackof

contrast).

Guidance:

immediatefeedback

and legibility

Recognition rather

than recall

• Makeitvisiblebyincreasingcontrastor

adding colour?

In“Trackers/userstories”,theconnection

between navigation labels is not logical.

What“Createanewartefact”hastodo

with“Notifications”,“Administration”,or

“Help”(andsoon)?

Guidance: grouping/


Consistency and

standards

• Re-organizenavigation:isitnecessaryto

have“Notifications”,“Administration”,or

“Help”atthislevel?Make“Createanew

artefact”abuttoninsteadofalink.

. . . . . .

3


Issues to improve-

3

2

2

2

3




Keyfindingsfor“Customizeaprojectdashboard”



Important actionslike“Submit”,“Submit

newartifact”,“Createanewtracker”or

“Configure”aretoosmallandnotvisible

(smallfontandicons,lackofcontrast).

Guidance: prom-


Recognition rather

than recall


In“Trackers/userstories”reloading

withoutsavingmakesmelosetabs

organization.

Explicit control • Keepmychangeswithoutsaving?

Tooltip on navigation labelstakesalong

time to appear.

Guidance:

immediatefeedback

• Reducedelay?

Iexpectedtoberedirected to my sprint

cardwallafterconfiguringit.

Workload: brevity

Adaptability:

flexibilityanduser

experience

• Redirectmetothecardwallandletme

seemychangesincontext?Providea

contexutallinktomycardwall?

In“Trackers/userstories”,dropdown

“options” labelismisleading.Particularly

whenthislabelisusedforotherdifferent

actions on the interface.


Recognition rather

than recall

• Isthisactionsoimportant?WillIlose

some data? If so, re-organize options to

differentiateactions(“save”,“saveas”,

“setpublic”),anduseavisiblebutton

dropdown. And if not, remove the

dropdown?

In“Trackers/userstories”,the “options”

dropdown to printer version is

misleading.


Recognition rather

than recall

• Makeitaprintericon?

In“Trackers”list,“delete” icons are

redundant.

Workload:

information density

• Showitonmousehoveronly?Addor

replaceiconwithan“Edit”link?

Inmy“Agiledashboard”page,Ihavean

empty table with header rows.

Workload:

information density


. . . . . .

Issues to improve-

2

2

2

2

2

2

2

2


31




Inmy“Agiledashboard”page,Ican’t

figurewhaticons mean without tooltip.

Significance of

Codes

Recognition rather

than recall

• Makeiconsmoreexplicit,orreplace

thembycontextuallinks.

In“Trackers/userstories”default

menu, show/hide icons duplicate the

dropdown.

Workload: minimal

actions and

information density

• Providedropdownandremoveshow/

hide?

In“Trackers/userstories”,“Toggle

criteria”pop over seems to include

printer version option because of its

opacity.

Guidance: grouping/


and legibility

Consistency and

standards

• Re-organizeitemsinpopovertoreduce

itssize?Thinkofanotherwaytotoggle

criterias?Reducepopoveropacity?

In my personal page, public/private

status is as visible as the project name.

Andit’shardtoseethedifference

between opened/closed locker icons.


Recognition rather

than recall

• Stylelockericonsandhighlightstatus

withacolouredbackground?Add

margin/padding and contrast?

Widget titles are not visible. Guidance: legibility

Recognition rather

than recall

• Addmargin/paddingandcontrast?

In“Trackers”list,alarge tooltip repeats

someoftheinformationslocatednextto

its related title and hides page content.

Workload:

information density

• Removetooltip?

Success alerts don’t respect colour code

standards.

Consistency and

standards

• Switchitfrombluetogreen?

Whenexpanded,defaultmenuin“user

stories”trackeroccupiesa third of my

screen. Even if the issue is partly resolved

with the show/hide, with navigations

levels it’s almost 50% of my screen that

are occupied.

Guidance: grouping/


and legibility

Consistency and

standards

• It’sratherausability goal:fixingother

issues should contribute to resolve it.


Issues to improve-2

1

1

1

1

1

1




Story:asanewuser,Iwanttocreateanewtrackerfororganizingatodolist

Track everything related to a project


Testingtrackercreationfeaturestepbystepinanactionsequence,andextractingusabilityissues.

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.


33



Positive findings

Guidelines Severity rating GuidelinesPositive findings+ Icanchoosepreconfiguredtrackertemplateslike“Tasks”

to create my to do list.

Workload: brevity


userexperience

Informsection,redasteriskshighlightrequiredfields. Significance of Codes



Error messages arenotexplicit. Error management • Provideexplicittipsonhowtocorrect

errors.Don’tmentionthebrowser’s

backbuttonsinceit’snotonthe

interface?

“Createanewtracker”linkistoosmall

andnotvisible(smallfontandicons,lack

of contrast).

Guidance: prom-


Recognition rather

than recall


Mytrackercreationwasasuccess, but

I have an error message. But maybe it’s

because I’m on a demo and it’s not so

important?

Guidance:

immediatefeedback

Error management

• Disablethe“Create”buttonafterit’s

clicked?

. . . . . .


Issues to improve-3

2




Testgoalsandobjectives,linkedtotheproduct’sbusinessgoals

Executive summary

What?

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.


https://demo.tuleap.net

35



Establishing severity ratings

Findingsareprioritizedbytheseverityoftheirimpactontheuser’sexperience,sothattheteamcanestablishwhatissuesmustbefixedfirst.

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

structure and content of the software.

Decidewhatstoriesauserwillperformtocompleteoneor

moretaskswiththeinterface.

Prioritizeactionsaccordingtoyourownseverityratingsystem

(see“Establishingseverityratings”).

Analyzethosesteps,lookingforproblemsandusingusability

guidelines,andsuggestrecommendationstofixtheissues.

Methodology

Severity rating scale — 3-point severity rating

3. Catastrophe —usercannotcompletetask;orusercancompletetheprocessbutexpressesextremeirritationattheprocess;oruserneedsassistance(businessgoalistomaketheprocessflexibleandindependentofuserassistance).

3

2. Serious problem—userisfrustratedbutgetsthroughit;suggeststhatothersmay be less inclined to put up with the inconvenience or that frustration level will be high.

2

1. Cosmetic problem—usermayhesitateorpickthewrongoption,butusercorrectsitwithoutincident;oruserexpressesminorirritationorannoyance,but itdoesn’taffectabilitytocompletetasks.

1




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?

Next steps

Follow-upmeetingonFebruary14,2013,tosharethe

findingswiththeteam,andaggregatethemtotheiractual

evaluations.

PublishthefindingsonTuleapwikitosharethemwiththe

community.

Plan,conduct,analyzeandreportonuserinterviewsand

usability tests.

Fixtheissues,andtestagain.


37



Well-knownuserinterfacedesignrulesandusabilityguidelinesusedforthisevaluation

Ressources

Bastien & Scapin ergonomic criterias

•Guidance:prompting,grouping/distinctionofitemsbylocation and format •Workload:brevity(concisionandminimalactions)andinformation density •Explicitcontrol:explicituseractionandusercontrol •Adaptability:flexibilityanduserexperience •Errormanagement:errorprotection,qualityoferrormessages, error corrections •Consistency •Significanceofcodes •Compatibility

Detailed guidelines: http://www.webmaestro.gouv.qc.ca/publications/archives/webeducation1998-2004/2000-11/criteres.pdf

Principles of user interface design

•Clarityisjob#1 •Interfacesexisttoenableinteraction •Conserveattentionatallcosts •Keepusersincontrol •Directmanipulationisbest •Oneprimaryactionperscreen •Keepsecondaryactionssecondary •Provideanaturalnextstep •Appearancefollowsbehavior(akaformfollowsfunction) •Consistencymatters •Strongvisualhierarchiesworkbest •Smartorganizationreducescognitiveload •Highlight,don’tdetermine,withcolor •Progressivedisclosure •Helppeopleinline •Acrucialmoment:thezerostate •Existingproblemsaremostvaluable •Greatdesignisinvisible •Buildonotherdesigndisciplines •Interfacesexisttobeused

Detailed principles:http://bokardo.com/principles-of-user-interface-design/

Jakob Nielsen’s 10 heuristics

•Consistencyandstandards •Visibilityofsystemstatus •Matchbetweensystemandrealworld •Usercontrolandfreedom •Errorprevention •Recognitionratherthanrecall •Flexibilityandefficiencyofuse •Aestheticandminimalistdesign •Helpusersrecognize,diagnose,andrecoverfromerrors •Provideonlinedocumentationandhelp

Detailed guidelines: http://www.nngroup.com/articles/ten-usability-heuristics/


http://www.webmaestro.gouv.qc.ca/publications/archives/webeducation1998-2004/2000-11/criteres.pdf



http://bokardo.com/principles-of-user-interface-design/

http://bokardo.com/principles-of-user-interface-design/

http://www.nngroup.com/articles/ten-usability-heuristics/



Tuleap interface inspection€¦ · 13/2/2013 · • Detect usability issues and address them to...

Documents

Transcript of Tuleap interface inspection€¦ · 13/2/2013 · • Detect usability issues and address them to...