SlideShare a Scribd company logo
1 of 12
Download to read offline
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

More Related Content

Viewers also liked

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
 

Viewers also liked (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
 

Recently uploaded

怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
eeanqy
 
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
gajnagarg
 
怎样办理伯明翰城市大学毕业证(BCU毕业证书)成绩单留信认证
怎样办理伯明翰城市大学毕业证(BCU毕业证书)成绩单留信认证怎样办理伯明翰城市大学毕业证(BCU毕业证书)成绩单留信认证
怎样办理伯明翰城市大学毕业证(BCU毕业证书)成绩单留信认证
eeanqy
 
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
 
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
HyderabadDolls
 
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
nirzagarg
 
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
yhavx
 
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
nirzagarg
 
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
 
怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证
怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证
怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证
eeanqy
 
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
 

Recently uploaded (20)

BLOCK CHAIN PROJECT block chain project
BLOCK CHAIN  PROJECT block chain projectBLOCK CHAIN  PROJECT block chain project
BLOCK CHAIN PROJECT block chain project
 
NO1 Top Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakist...
NO1 Top Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakist...NO1 Top Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakist...
NO1 Top Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakist...
 
How to Turn a Picture Into a Line Drawing in Photoshop
How to Turn a Picture Into a Line Drawing in PhotoshopHow to Turn a Picture Into a Line Drawing in Photoshop
How to Turn a Picture Into a Line Drawing in Photoshop
 
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
 
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
 
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
 
Eye-Catching Web Design Crafting User Interfaces .docx
Eye-Catching Web Design Crafting User Interfaces .docxEye-Catching Web Design Crafting User Interfaces .docx
Eye-Catching Web Design Crafting User Interfaces .docx
 
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
 
Lecture 01 Introduction To Multimedia.pptx
Lecture 01 Introduction To Multimedia.pptxLecture 01 Introduction To Multimedia.pptx
Lecture 01 Introduction To Multimedia.pptx
 
怎样办理伯明翰城市大学毕业证(BCU毕业证书)成绩单留信认证
怎样办理伯明翰城市大学毕业证(BCU毕业证书)成绩单留信认证怎样办理伯明翰城市大学毕业证(BCU毕业证书)成绩单留信认证
怎样办理伯明翰城市大学毕业证(BCU毕业证书)成绩单留信认证
 
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
 
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
 
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
 
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
 
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
 
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
 
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...
 
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
 
怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证
怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证
怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证
 
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...
 

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