summary - prestashop developers’ blog...copywriting style • go straight to the point, be concise...
TRANSCRIPT
![Page 1: Summary - PrestaShop Developers’ blog...Copywriting style • Go straight to the point, be concise and use meaningful text. • Consistency is key: ensure you use a specificlabel](https://reader033.vdocument.in/reader033/viewer/2022043009/5f9ad9f77c0b654cdc16d95e/html5/thumbnails/1.jpg)
![Page 2: Summary - PrestaShop Developers’ blog...Copywriting style • Go straight to the point, be concise and use meaningful text. • Consistency is key: ensure you use a specificlabel](https://reader033.vdocument.in/reader033/viewer/2022043009/5f9ad9f77c0b654cdc16d95e/html5/thumbnails/2.jpg)
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
![Page 3: Summary - PrestaShop Developers’ blog...Copywriting style • Go straight to the point, be concise and use meaningful text. • Consistency is key: ensure you use a specificlabel](https://reader033.vdocument.in/reader033/viewer/2022043009/5f9ad9f77c0b654cdc16d95e/html5/thumbnails/3.jpg)
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.
![Page 4: Summary - PrestaShop Developers’ blog...Copywriting style • Go straight to the point, be concise and use meaningful text. • Consistency is key: ensure you use a specificlabel](https://reader033.vdocument.in/reader033/viewer/2022043009/5f9ad9f77c0b654cdc16d95e/html5/thumbnails/4.jpg)
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]
![Page 5: Summary - PrestaShop Developers’ blog...Copywriting style • Go straight to the point, be concise and use meaningful text. • Consistency is key: ensure you use a specificlabel](https://reader033.vdocument.in/reader033/viewer/2022043009/5f9ad9f77c0b654cdc16d95e/html5/thumbnails/5.jpg)
Facilitate the first steps
Onboarding
Howtogetstarted
Dependingonthenatureandcomplexityofyourmodule,youmaywanttostartwithashortintroductiontosummarizethemainsteps/taskstocompletetousethemoduleproperly.Thiswillhelptheusertounderstandquicklyhowitworksandmakethefirstapproacheasier.
Therearedifferentapproachestoonboardyouruser,youcouldalsouseavideo,or a popup:
1
![Page 6: Summary - PrestaShop Developers’ blog...Copywriting style • Go straight to the point, be concise and use meaningful text. • Consistency is key: ensure you use a specificlabel](https://reader033.vdocument.in/reader033/viewer/2022043009/5f9ad9f77c0b654cdc16d95e/html5/thumbnails/6.jpg)
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.
![Page 7: Summary - PrestaShop Developers’ blog...Copywriting style • Go straight to the point, be concise and use meaningful text. • Consistency is key: ensure you use a specificlabel](https://reader033.vdocument.in/reader033/viewer/2022043009/5f9ad9f77c0b654cdc16d95e/html5/thumbnails/7.jpg)
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
![Page 8: Summary - PrestaShop Developers’ blog...Copywriting style • Go straight to the point, be concise and use meaningful text. • Consistency is key: ensure you use a specificlabel](https://reader033.vdocument.in/reader033/viewer/2022043009/5f9ad9f77c0b654cdc16d95e/html5/thumbnails/8.jpg)
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.
![Page 9: Summary - PrestaShop Developers’ blog...Copywriting style • Go straight to the point, be concise and use meaningful text. • Consistency is key: ensure you use a specificlabel](https://reader033.vdocument.in/reader033/viewer/2022043009/5f9ad9f77c0b654cdc16d95e/html5/thumbnails/9.jpg)
Grid view & List viewChoosealayoutthatsuitsthetypeofcontent.
Prefergridviewforvisualcontent.Ensureyoudisplay5or7imagesatthesametime,onthesamescreen.
Listviewisappropriateforgivingverydetailedinformation.
![Page 10: Summary - PrestaShop Developers’ blog...Copywriting style • Go straight to the point, be concise and use meaningful text. • Consistency is key: ensure you use a specificlabel](https://reader033.vdocument.in/reader033/viewer/2022043009/5f9ad9f77c0b654cdc16d95e/html5/thumbnails/10.jpg)
LayoutInformationshouldbeeasytoscan.TrytousetheF-shapeorZ-shapetoorganizeyourinterface.Bygivingstructuretoyourcontent,userswillfindtheneededin-formationquickly.
Grouprelatedinformationstogetherandusewhitespacetocreateseparationsbetweendifferentgroups:whitespacewillmakeyourinterfaceeasiertoread.
Tables• Givetheabilitytofilteranylistofdatasbymakingthe key columnssortable.
• Ifyourtableallowsmorethan2actionsperline,identifythemostfrequentlyusedactionandmakeitanicon.Addatooltiponhovertoreduceambiguity:
![Page 11: Summary - PrestaShop Developers’ blog...Copywriting style • Go straight to the point, be concise and use meaningful text. • Consistency is key: ensure you use a specificlabel](https://reader033.vdocument.in/reader033/viewer/2022043009/5f9ad9f77c0b654cdc16d95e/html5/thumbnails/11.jpg)
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.
![Page 12: Summary - PrestaShop Developers’ blog...Copywriting style • Go straight to the point, be concise and use meaningful text. • Consistency is key: ensure you use a specificlabel](https://reader033.vdocument.in/reader033/viewer/2022043009/5f9ad9f77c0b654cdc16d95e/html5/thumbnails/12.jpg)
Guide and help your users3
Actions and buttons Textonabuttonisalwaysanimperativeverb.Ithastodescribetheactioninthemostconciseandclearway.
Donotusemorethan2buttonsizesand2buttoncolors.Yourinterfaceshouldhaveonecontrastbuttoncolortodifferentiatethemainandsecondaryactions.
Contextual help / tooltipsInaddition to thedocumentation youprovidewith yourmodule, you canusecontextualhelptogivetheuserthepossibilitytofindanswerstohisquestionsatthemomenthe’smorelikelytoneedit,withouthavingtoleavehispositionintheinterface.
![Page 13: Summary - PrestaShop Developers’ blog...Copywriting style • Go straight to the point, be concise and use meaningful text. • Consistency is key: ensure you use a specificlabel](https://reader033.vdocument.in/reader033/viewer/2022043009/5f9ad9f77c0b654cdc16d95e/html5/thumbnails/13.jpg)
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.
![Page 14: Summary - PrestaShop Developers’ blog...Copywriting style • Go straight to the point, be concise and use meaningful text. • Consistency is key: ensure you use a specificlabel](https://reader033.vdocument.in/reader033/viewer/2022043009/5f9ad9f77c0b654cdc16d95e/html5/thumbnails/14.jpg)
FeedbackBesuretoprovideclearandcontextualfeedbacksotheuserunderstandswhatwentrightorwhatwentwrong.
Aconfirmationmessageshouldbegivenaftertheusersuccessfullycompletedatask.Anerrormessageshouldgivetheinformationaboutwhatwentwrong,andwhattodotocompletethetask.
Feedbackmessagesmustbeconciseandgostraighttothepoint.
Feedbackmessages are dynamic, they appear on the top right corner of thescreen.
![Page 15: Summary - PrestaShop Developers’ blog...Copywriting style • Go straight to the point, be concise and use meaningful text. • Consistency is key: ensure you use a specificlabel](https://reader033.vdocument.in/reader033/viewer/2022043009/5f9ad9f77c0b654cdc16d95e/html5/thumbnails/15.jpg)
Empty statesMakesurenottoleaveyourusersinastalemate.Instead,youcanprovidethemcluestohelpthemfillthatscreen.
• Giveexplanation to themerchant aboutwhat informationhewouldfindonce that screen completed
• Enableusertofillthatpagebymakingavailabletheappropriatefunction
• Provide more details about the process if necessary
Youremptystatesshouldneverbeempty.
![Page 16: Summary - PrestaShop Developers’ blog...Copywriting style • Go straight to the point, be concise and use meaningful text. • Consistency is key: ensure you use a specificlabel](https://reader033.vdocument.in/reader033/viewer/2022043009/5f9ad9f77c0b654cdc16d95e/html5/thumbnails/16.jpg)
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
![Page 17: Summary - PrestaShop Developers’ blog...Copywriting style • Go straight to the point, be concise and use meaningful text. • Consistency is key: ensure you use a specificlabel](https://reader033.vdocument.in/reader033/viewer/2022043009/5f9ad9f77c0b654cdc16d95e/html5/thumbnails/17.jpg)
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
![Page 18: Summary - PrestaShop Developers’ blog...Copywriting style • Go straight to the point, be concise and use meaningful text. • Consistency is key: ensure you use a specificlabel](https://reader033.vdocument.in/reader033/viewer/2022043009/5f9ad9f77c0b654cdc16d95e/html5/thumbnails/18.jpg)
Consistency and standards5
Font and icons
Font
ThefontusedinthePrestaShopback-officeisOpen Sans.Keepthenumberoffontstominimum.
Icons
TheiconfontusedinthePrestaShopback-officeisGooglematerialicons.
Makesuretousethemostuniversalpossibleicons.
Whereverpossible,uselabelswithyouriconstoreduceambiguity.Iconsalonecanbeinterpreteddifferentlydependingontheuser’sexperienceonothersof-twaresandproducts.
![Page 19: Summary - PrestaShop Developers’ blog...Copywriting style • Go straight to the point, be concise and use meaningful text. • Consistency is key: ensure you use a specificlabel](https://reader033.vdocument.in/reader033/viewer/2022043009/5f9ad9f77c0b654cdc16d95e/html5/thumbnails/19.jpg)
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.