Summary - PrestaShop · PrestaShop has differentplatforms and products and serves a huge...

SummaryPrestaShop’s Design Principles 3

Why this guide ? 4

1. Facilitate the first steps 5

Onboarding

Login / Account creation

2. Organize your interface 7

Menu and navigation

Information architecture

Tables

Forms/Inputfields

3. Guide and help your users 12

Actions and buttons

Contextual help / tooltips

Confirmationpopup

Feedback

Empty states

4. Use the right words 16

Copywriting style

PrestaShop glossary

5. Consistency and standards 18

Fonts and Icons

Text areas

PrestaShop Design Principles

Build for professionalsPrestaShop’sfinalusersaremerchants.Interfaces,flowsandinteractionsshouldservetheirprofessionalneeds.Gostraighttothepoint.Deliverhelpandinforma-tion.Userexperiencemustbeasefficientaspossible.Usersshouldachievetheirgoalswithouthesitationordifficulty.

Design for humansPrestashopusersarehumans.Don’tforgettheemotionalpartofuserexperience.Preventstressorfrustration.Givefeedbackstoanyinteraction.Useclearcopy.Eachproblemshouldhaveasolutionandahelpfulalertmessage.Neverforgettheuser’semotions.

Stay consistentPrestaShop has different platforms and products and serves a huge commu-nity.Consistencyiscrucialtomaintainuserexperiencequalityandstayscalable.Pleaserespectourbranding,styleguidesandstandards.

Be universalPrestaShopisinternational.Everyhumanbeing,nomattertheculture,language,connectionorscreen’squality,shouldbeabletouseourproductsandunders-tandourinterfaces.Avoidtone,expressionsorinteractionsthatarespecifictoonlyonekindofpeople.Beuniversal.Interfacesshouldbeadaptivetoanylan-guage,behaviororstandard.

Why this guide?

This document is a set of good practices meant to help our contributors to create efficientandeasytousemodules.It’salsoanefforttoharmonizeandimprovetheoverallexperienceproposedbythePrestaShopecosystem.

Consideringthediversityofmodulesandcontributors,buildinganexhaustivelistofguidelinesandcoveralltheusecaseswouldhavebeenatoughtask.Hence,we decided to develop a certain number of points that are important to take in accounttodesignuser-friendlymodule’sinterfaces.

We need your help to continue to update these guidelines: don’t hesitate to give usyourfeedbackorsubmityourrequestshere:design@prestashop.com

Facilitate the first steps

Onboarding

Howtogetstarted

Dependingonthenatureandcomplexityofyourmodule,youmaywanttostartwithashortintroductiontosummarizethemainsteps/taskstocompletetousethemoduleproperly.Thiswillhelptheusertounderstandquicklyhowitworksandmakethefirstapproacheasier.

Therearedifferentapproachestoonboardyouruser,youcouldalsouseavideo,or a popup:

1

Steppers

Iftheuserhastogothroughseveralspecificstepstoconfigurethemodule,makesure that he is guided through these steps by using steppers.

Stepperscanbehorizontalorverticaldependingonthenumberofsteps,theydisplayprogressbydividingasequenceintomultipletasks.

Usersshouldknowwhattasktheyarecompletingandhowmanytaskstheyhavegotlefttocomplete.

Login / Account creationIfyourmodulerequiresaloginoranaccountcreation,besuretomakeitthefirstvisibletasktocomplete.Keepthesignupformassimpleaspossible,withthemi-nimumnumberoffields.

See the Forms / Input fields section for more best practices about designing forms.

Menu and navigation

Menu ordering

Ifyourmoduleismeanttobeusedfrequently,themostfrequentlyuseditemsshouldbeplacedfirstinthemenu.

Ifyourmoduleismeanttobeconfiguredonlyonetimebeforeitrunsonit’sown,the menu ordering should have a step-by-step approach in order to guide the userthroughtheconfigurationprocess.Youcanconsidernumberingyourmenuitems.

Organizeyour interface2

Menu items denomination should be as explicit as possible while remaining concise.

Menu design

Horizontaltabsontopofthepagearetheprimarynavigationitemsofyourmo-dule’sconfigurationinterface.

Ifyourmenuhastoomanyitemstofitinthehorizontaltabs,useaverticalmenu.

Donotplaceyourmenuinalocationthatisunfamiliartotheuser,andremem-ber that a menu with too many items may be confusing:

trytominimizethenumberofitemsasmuchaspossible.

NavigationUsersshouldalwaysknowwheretheyareandhowtheygotthere.

Aboveacertainlevelofcomplexity,breadcrumbsareagoodoptiontokeeptheuserinformedabouthislocationwithinthemodule’shierarchy,justlikeonawe-bsite.

Information architectureTrytolimitthenumberoflevelsofinformation:thedeeperahierarchybecomes,themorelikelyusersaretobecomedisoriented.

Alwaysgivecontexttotheuserwithpagesthatareproperlytitledandsub-titled.Theoptimalnumberoflevelsfortypographicelementsis3:primary,secondaryandtertiary.

Grid view & List viewChoosealayoutthatsuitsthetypeofcontent.

Prefergridviewforvisualcontent.Ensureyoudisplay5or7imagesatthesametime,onthesamescreen.

Listviewisappropriateforgivingverydetailedinformation.

LayoutInformationshouldbeeasytoscan.TrytousetheF-shapeorZ-shapetoorganizeyourinterface.Bygivingstructuretoyourcontent,userswillfindtheneededin-formationquickly.

Grouprelatedinformationstogetherandusewhitespacetocreateseparationsbetweendifferentgroups:whitespacewillmakeyourinterfaceeasiertoread.

Tables• Givetheabilitytofilteranylistofdatasbymakingthe key columnssortable.

• Ifyourtableallowsmorethan2actionsperline,identifythemostfrequentlyusedactionandmakeitanicon.Addatooltiponhovertoreduceambiguity:

Gathertheotheractionsunderasingledrop-downiconandnamethisco-lumn “Action”

• Provideabulk-actionfunctionalityas itwillhelpyouruserstofinishtheirtasksquicker.

Forms / input fields• Useshortandaccuratelabelsforeachfield.Ifthelabelisnotexplicitenough,

addaHelptooltip.

• Useradiobuttonswhenyouhavetodisplayfewoptions.Beyond5options,consideradropdownlist.

• FinishtheformwithaValidationbutton.

• Grouptogetherrelatedfieldstomaketheformmorescannable.

• Generally,aforminputfieldhas6states: Default,Hover,Focus,Error,Suc-cessandDisabled.

Guide and help your users3

Actions and buttons Textonabuttonisalwaysanimperativeverb.Ithastodescribetheactioninthemostconciseandclearway.

Donotusemorethan2buttonsizesand2buttoncolors.Yourinterfaceshouldhaveonecontrastbuttoncolortodifferentiatethemainandsecondaryactions.

Contextual help / tooltipsInaddition to thedocumentation youprovidewith yourmodule, you canusecontextualhelptogivetheuserthepossibilitytofindanswerstohisquestionsatthemomenthe’smorelikelytoneedit,withouthavingtoleavehispositionintheinterface.

Tooltipsshouldbeconcise.Avoidwritinglongparagraphsastheuserswillbelesslikelytoreadit.Notethattooltipsappearanddisappearonhover,notonclick.Youcanusethemdirectlyonaelementoruseanicontomakethemmoreiden-tifiable.

Trytoidentifythecriticalpoints,wheretheuserismostlikelytoneedinforma-tion:toomanytooltipsonthesamepagemayhavetheoppositeeffectandleaveyouruserdisoriented.

Confirmation popup Prevent your users to accidentally make irreversible manipulations by using confirmationpopups.

Keepinmindthatpopupsareinterruptive,theymustbeusedonlywhenusersmustconfirmacritical action.Unnecessaryconfirmationpopupsareveryan-noyingastheywillonlyslowdownyouruserinit’swork.

Confirmationpopupsshouldinformuserabouttheconsequencesoftheaction.

Notethataconfirmationpopupisfollowedbyadynamicfeedbackmessagetoconfirmthattheactionwassuccessfullydone.

FeedbackBesuretoprovideclearandcontextualfeedbacksotheuserunderstandswhatwentrightorwhatwentwrong.

Aconfirmationmessageshouldbegivenaftertheusersuccessfullycompletedatask.Anerrormessageshouldgivetheinformationaboutwhatwentwrong,andwhattodotocompletethetask.

Feedbackmessagesmustbeconciseandgostraighttothepoint.

Feedbackmessages are dynamic, they appear on the top right corner of thescreen.

Empty statesMakesurenottoleaveyourusersinastalemate.Instead,youcanprovidethemcluestohelpthemfillthatscreen.

• Giveexplanation to themerchant aboutwhat informationhewouldfindonce that screen completed

• Enableusertofillthatpagebymakingavailabletheappropriatefunction

• Provide more details about the process if necessary

Youremptystatesshouldneverbeempty.

Use the right words4

Copywriting style• Gostraighttothepoint,beconciseandusemeaningfultext.

• Consistency iskey:ensureyouuseaspecific labelforthesamefunction/actionthroughoutyourentireinterface.

• Alwaysstaypositiveandhelpful,evenincriticalcontext.

PrestaShop glossaryMerchantsarefamiliarwiththedenominationslistedbelow.Ensureyouusethesuitablewordinordertoprovideaconsistentandfluidexperience.

Add new --- Act of extending something by creating a supplement

Configure Set parameters

Disable Turnoffafunction

Edit Operate a change

Enable Turn on a function

Reset Restore the default settings

Save Apply changes

Cancel Abort an action

Duplicate Create a copy

Preview Viewamodificationbeforeit’ssaved

Filter by --- Applyaspecificfilteronalistofitems

Sort by --- Generallyusedfornumericalvalueswithameaningfulorder

Select all Select all the items of a list

Upgrade Move to the latest version

Generate Createaspecificfile(eg:generatea.pdf,generatea.csvfile)

Show all Displayafulllistofitems

Refresh Updatealistofitems

Search Lookforaspecificitem

Bulk action Apply an action to several selected items

Consistency and standards5

Font and icons

Font

ThefontusedinthePrestaShopback-officeisOpen Sans.Keepthenumberoffontstominimum.

Icons

TheiconfontusedinthePrestaShopback-officeisGooglematerialicons.

Makesuretousethemostuniversalpossibleicons.

Whereverpossible,uselabelswithyouriconstoreduceambiguity.Iconsalonecanbeinterpreteddifferentlydependingontheuser’sexperienceonothersof-twaresandproducts.

Text areas • Limitlinelengthtoapproximately60charactersperline,thisiskeytothe

readabilityofyourtextareas.

• Usecomfortablespacingbetweenlines:itisrecommendedtoalwayssetalinespacing20%higherthanthedefaultone.

• Donotuse toosmall charactersize.Below12px,someusersmighthavetroublestoreadyourinterface.

• Donotuseallcapstext

• Usepropercontrastbetweenfontandbackground(don’thesitatetouseacolor contrast checkertoseeifyourinterfacemeetstheWCAGstandards).

Color choicesPrestaShopdoesn’t impose theuseof theback-officecolorpalette in themo-dulesinterfaces.However,themoreyourcolorchoiceswillmatchtheback-officeenvironment,themoreyouruserswillenjoyaconsistentandfluidexperience.