Summary - PrestaShop Developers’ blog...Copywriting style • Go straight to the point, be concise...
Transcript of Summary - PrestaShop Developers’ blog...Copywriting style • Go straight to the point, be concise...
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:[email protected]
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.