SlideShare una empresa de Scribd logo
1 de 12
Descargar para leer sin conexión
10 best practices of
a good USER INTERFACE design
#UI
part 1
Created by Ewa Jaroslawska (@ejaroslawska) www.jaroslawska.com #UI
A one column layout will give
you more control over flow
of the website and help to
guide your readers from top
to bottom with proper call to
action at the end.
Created by Ewa Jaroslawska (@ejaroslawska) www.jaroslawska.com #UI
ONE COLUMN LAYOUT
Explain who is your targeted
group versus targeting everyone
(and none). You can even show
“qualification” or best fit criteria.
Created by Ewa Jaroslawska (@ejaroslawska) www.jaroslawska.com #UI
LASER TARGETING
Differentiate styles between
clickable actions (links, buttons),
selected elements (chosen
items) and plain text and use it
consistently across an interface.
Created by Ewa Jaroslawska (@ejaroslawska) www.jaroslawska.com #UI
CLICKABLE BUTTONS DIFFERENTIATION
Repeat your call to action on
longer pages or across numerous
pages where applicable and
fitting the context.
Created by Ewa Jaroslawska (@ejaroslawska) www.jaroslawska.com #UI
REPEAT CALL TO ACTION
A social proof, especially
testimonials and data that
other people or companies
are using the
service/products, increases
conversion rates.
Created by Ewa Jaroslawska (@ejaroslawska) www.jaroslawska.com #UI
SOCIAL PROOF
When showing multiple offers,
then an emphasized product
suggestion might be a good idea
as some people need a little
nudge. Don’t offer to much to
avoid “paradox of choice”.
Created by Ewa Jaroslawska (@ejaroslawska) www.jaroslawska.com #UI
RECOMMEND BEST PRODUCT
When designing registering
process think which elements
are crucial – rest remove. The
more fields to fill in, less people
will sign up, especially on
mobiles.
Created by Ewa Jaroslawska (@ejaroslawska) www.jaroslawska.com #UI
SIMPLE FORM FIELDS
Be direct about your call to
action. Don’t end your message
with question marks or words
like perhaps, maybe, interested?
and want to?
Created by Ewa Jaroslawska (@ejaroslawska) www.jaroslawska.com #UI
BE DIRECT
Make your users feel more in
control by enabling the ability to
undo actions and not asking for
double confirmation where
possible.
Created by Ewa Jaroslawska (@ejaroslawska) www.jaroslawska.com #UI
UNDO'S VS. DOUBLE CONFIRMATION
Instead of asking for money
right away, give consumers a
gift first. Additionally, it is a
great method to make people
try your product without a
barrier.
Created by Ewa Jaroslawska (@ejaroslawska) www.jaroslawska.com #UI
GIFT BEFORE PURCHASE
Final Checklist:
Created by Ewa Jaroslawska (@ejaroslawska) www.jaroslawska.com #leadership
1. ONE COLUMN LAYOUT
2. LASER TARGETING
3. CLICKABLE BUTTONS DIFFERENTIATION
4. REPEAT CALL TO ACTION
5. SOCIAL PROOF
6. RECOMMEND BEST PRODUCT
7. SIMPLE FORM FIELDS
8. UNDO'S VS. DOUBLE CONFIRMATION
9. BE DIRECT
10. GIFT BEFORE PURCHASE

Más contenido relacionado

Destacado

Have you been vaccinated
Have you been vaccinatedHave you been vaccinated
Have you been vaccinated
oakke01
 
Have you been vaccinated
Have you been vaccinatedHave you been vaccinated
Have you been vaccinated
oakke01
 
Textual Interface - the rise of the chatbot
Textual Interface - the rise of the chatbotTextual Interface - the rise of the chatbot
Textual Interface - the rise of the chatbot
Steven Cooper
 

Destacado (15)

Building the future as a full stack dev
Building the future as a full stack devBuilding the future as a full stack dev
Building the future as a full stack dev
 
PHP Australia
PHP AustraliaPHP Australia
PHP Australia
 
Have you been vaccinated
Have you been vaccinatedHave you been vaccinated
Have you been vaccinated
 
Timo Sirainen - Dovecot Story - Mindtrek 2016
Timo Sirainen - Dovecot Story - Mindtrek 2016Timo Sirainen - Dovecot Story - Mindtrek 2016
Timo Sirainen - Dovecot Story - Mindtrek 2016
 
Have you been vaccinated
Have you been vaccinatedHave you been vaccinated
Have you been vaccinated
 
Commerce of Things 2015
Commerce of Things 2015Commerce of Things 2015
Commerce of Things 2015
 
Capitulo6
Capitulo6Capitulo6
Capitulo6
 
Real time control and communication ( Robots , Machines , IOT )
Real time control and communication ( Robots , Machines , IOT )Real time control and communication ( Robots , Machines , IOT )
Real time control and communication ( Robots , Machines , IOT )
 
PHPConf.Asia - The Sound of PHP
PHPConf.Asia - The Sound of PHPPHPConf.Asia - The Sound of PHP
PHPConf.Asia - The Sound of PHP
 
Machines for accounting records
Machines for accounting recordsMachines for accounting records
Machines for accounting records
 
Execucoes fiscais
Execucoes fiscaisExecucoes fiscais
Execucoes fiscais
 
Rtp webinar-verifone-final deck-fv
Rtp webinar-verifone-final deck-fvRtp webinar-verifone-final deck-fv
Rtp webinar-verifone-final deck-fv
 
Compcon 2016 Workshop
Compcon 2016 WorkshopCompcon 2016 Workshop
Compcon 2016 Workshop
 
Textual Interface - the rise of the chatbot
Textual Interface - the rise of the chatbotTextual Interface - the rise of the chatbot
Textual Interface - the rise of the chatbot
 
IoT and the Payments Industry
IoT and the Payments IndustryIoT and the Payments Industry
IoT and the Payments Industry
 

Último

一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
yhavx
 
Minimalist Orange Portfolio by Slidesgo.pptx
Minimalist Orange Portfolio by Slidesgo.pptxMinimalist Orange Portfolio by Slidesgo.pptx
Minimalist Orange Portfolio by Slidesgo.pptx
balqisyamutia
 
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
CristineGraceAcuyan
 
Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...
Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...
Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...
Nitya salvi
 
poliovirus-190801072449. pptx
poliovirus-190801072449.            pptxpoliovirus-190801072449.            pptx
poliovirus-190801072449. pptx
ssuser0ad194
 
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
awasv46j
 
Simple Conference Style Presentation by Slidesgo.pptx
Simple Conference Style Presentation by Slidesgo.pptxSimple Conference Style Presentation by Slidesgo.pptx
Simple Conference Style Presentation by Slidesgo.pptx
balqisyamutia
 
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
eqaqen
 
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
ehyxf
 
Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...
Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...
Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...
sriharipichandi
 
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
instagramfab782445
 
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman MuscatAbortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion pills in Kuwait Cytotec pills in Kuwait
 
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
gajnagarg
 
怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证
怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证
怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证
eeanqy
 

Último (20)

一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
 
Q4-W4-SCIENCE-5 power point presentation
Q4-W4-SCIENCE-5 power point presentationQ4-W4-SCIENCE-5 power point presentation
Q4-W4-SCIENCE-5 power point presentation
 
Minimalist Orange Portfolio by Slidesgo.pptx
Minimalist Orange Portfolio by Slidesgo.pptxMinimalist Orange Portfolio by Slidesgo.pptx
Minimalist Orange Portfolio by Slidesgo.pptx
 
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
 
Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...
Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...
Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...
 
poliovirus-190801072449. pptx
poliovirus-190801072449.            pptxpoliovirus-190801072449.            pptx
poliovirus-190801072449. pptx
 
Sweety Planet Packaging Design Process Book.pptx
Sweety Planet Packaging Design Process Book.pptxSweety Planet Packaging Design Process Book.pptx
Sweety Planet Packaging Design Process Book.pptx
 
Jordan_Amanda_DMBS202404_PB1_2024-04.pdf
Jordan_Amanda_DMBS202404_PB1_2024-04.pdfJordan_Amanda_DMBS202404_PB1_2024-04.pdf
Jordan_Amanda_DMBS202404_PB1_2024-04.pdf
 
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
 
Simple Conference Style Presentation by Slidesgo.pptx
Simple Conference Style Presentation by Slidesgo.pptxSimple Conference Style Presentation by Slidesgo.pptx
Simple Conference Style Presentation by Slidesgo.pptx
 
TRose UXPA Experience Design Concord .pptx
TRose UXPA Experience Design Concord .pptxTRose UXPA Experience Design Concord .pptx
TRose UXPA Experience Design Concord .pptx
 
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
 
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
 
Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...
Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...
Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...
 
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
 
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman MuscatAbortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
 
Raebareli Girl Whatsapp Number 📞 8617370543 | Girls Number for Friendship
Raebareli Girl Whatsapp Number 📞 8617370543 | Girls Number for FriendshipRaebareli Girl Whatsapp Number 📞 8617370543 | Girls Number for Friendship
Raebareli Girl Whatsapp Number 📞 8617370543 | Girls Number for Friendship
 
High Profile Escorts Nerul WhatsApp +91-9930687706, Best Service
High Profile Escorts Nerul WhatsApp +91-9930687706, Best ServiceHigh Profile Escorts Nerul WhatsApp +91-9930687706, Best Service
High Profile Escorts Nerul WhatsApp +91-9930687706, Best Service
 
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
 
怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证
怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证
怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证
 

10 Best Practices of a Good User Interface design #UI

  • 1. 10 best practices of a good USER INTERFACE design #UI part 1 Created by Ewa Jaroslawska (@ejaroslawska) www.jaroslawska.com #UI
  • 2. A one column layout will give you more control over flow of the website and help to guide your readers from top to bottom with proper call to action at the end. Created by Ewa Jaroslawska (@ejaroslawska) www.jaroslawska.com #UI ONE COLUMN LAYOUT
  • 3. Explain who is your targeted group versus targeting everyone (and none). You can even show “qualification” or best fit criteria. Created by Ewa Jaroslawska (@ejaroslawska) www.jaroslawska.com #UI LASER TARGETING
  • 4. Differentiate styles between clickable actions (links, buttons), selected elements (chosen items) and plain text and use it consistently across an interface. Created by Ewa Jaroslawska (@ejaroslawska) www.jaroslawska.com #UI CLICKABLE BUTTONS DIFFERENTIATION
  • 5. Repeat your call to action on longer pages or across numerous pages where applicable and fitting the context. Created by Ewa Jaroslawska (@ejaroslawska) www.jaroslawska.com #UI REPEAT CALL TO ACTION
  • 6. A social proof, especially testimonials and data that other people or companies are using the service/products, increases conversion rates. Created by Ewa Jaroslawska (@ejaroslawska) www.jaroslawska.com #UI SOCIAL PROOF
  • 7. When showing multiple offers, then an emphasized product suggestion might be a good idea as some people need a little nudge. Don’t offer to much to avoid “paradox of choice”. Created by Ewa Jaroslawska (@ejaroslawska) www.jaroslawska.com #UI RECOMMEND BEST PRODUCT
  • 8. When designing registering process think which elements are crucial – rest remove. The more fields to fill in, less people will sign up, especially on mobiles. Created by Ewa Jaroslawska (@ejaroslawska) www.jaroslawska.com #UI SIMPLE FORM FIELDS
  • 9. Be direct about your call to action. Don’t end your message with question marks or words like perhaps, maybe, interested? and want to? Created by Ewa Jaroslawska (@ejaroslawska) www.jaroslawska.com #UI BE DIRECT
  • 10. Make your users feel more in control by enabling the ability to undo actions and not asking for double confirmation where possible. Created by Ewa Jaroslawska (@ejaroslawska) www.jaroslawska.com #UI UNDO'S VS. DOUBLE CONFIRMATION
  • 11. Instead of asking for money right away, give consumers a gift first. Additionally, it is a great method to make people try your product without a barrier. Created by Ewa Jaroslawska (@ejaroslawska) www.jaroslawska.com #UI GIFT BEFORE PURCHASE
  • 12. Final Checklist: Created by Ewa Jaroslawska (@ejaroslawska) www.jaroslawska.com #leadership 1. ONE COLUMN LAYOUT 2. LASER TARGETING 3. CLICKABLE BUTTONS DIFFERENTIATION 4. REPEAT CALL TO ACTION 5. SOCIAL PROOF 6. RECOMMEND BEST PRODUCT 7. SIMPLE FORM FIELDS 8. UNDO'S VS. DOUBLE CONFIRMATION 9. BE DIRECT 10. GIFT BEFORE PURCHASE