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

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 devSteven Cooper
 
Have you been vaccinated
Have you been vaccinatedHave you been vaccinated
Have you been vaccinatedoakke01
 
Timo Sirainen - Dovecot Story - Mindtrek 2016
Timo Sirainen - Dovecot Story - Mindtrek 2016Timo Sirainen - Dovecot Story - Mindtrek 2016
Timo Sirainen - Dovecot Story - Mindtrek 2016Mindtrek
 
Have you been vaccinated
Have you been vaccinatedHave you been vaccinated
Have you been vaccinatedoakke01
 
Commerce of Things 2015
Commerce of Things 2015Commerce of Things 2015
Commerce of Things 2015SlashData
 
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 )ALTANAI BISHT
 
PHPConf.Asia - The Sound of PHP
PHPConf.Asia - The Sound of PHPPHPConf.Asia - The Sound of PHP
PHPConf.Asia - The Sound of PHPSteven Cooper
 
Machines for accounting records
Machines for accounting recordsMachines for accounting records
Machines for accounting recordsjenny urbana
 
Rtp webinar-verifone-final deck-fv
Rtp webinar-verifone-final deck-fvRtp webinar-verifone-final deck-fv
Rtp webinar-verifone-final deck-fvG3 Communications
 
Compcon 2016 Workshop
Compcon 2016 WorkshopCompcon 2016 Workshop
Compcon 2016 WorkshopSteven Cooper
 
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 chatbotSteven Cooper
 
IoT and the Payments Industry
IoT and the Payments IndustryIoT and the Payments Industry
IoT and the Payments IndustryMichael Navarrete
 

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

NO1 Popular kala jadu karne wale ka contact number kala jadu karne wale baba ...
NO1 Popular kala jadu karne wale ka contact number kala jadu karne wale baba ...NO1 Popular kala jadu karne wale ka contact number kala jadu karne wale baba ...
NO1 Popular kala jadu karne wale ka contact number kala jadu karne wale baba ...Amil baba
 
Claire's designing portfolio presentation
Claire's designing portfolio presentationClaire's designing portfolio presentation
Claire's designing portfolio presentationssuser8fae18
 
Abdulaziz Tariq Abdulaziz Mustafa CV 2024
Abdulaziz Tariq Abdulaziz Mustafa CV 2024Abdulaziz Tariq Abdulaziz Mustafa CV 2024
Abdulaziz Tariq Abdulaziz Mustafa CV 2024Abdulaziz Mustafa
 
Heidi Livengood's Professional CADD Portfolio
Heidi Livengood's Professional CADD PortfolioHeidi Livengood's Professional CADD Portfolio
Heidi Livengood's Professional CADD PortfolioHeidiLivengood
 
Redefining Globalization, urbanisation and Localisation
Redefining Globalization, urbanisation and LocalisationRedefining Globalization, urbanisation and Localisation
Redefining Globalization, urbanisation and LocalisationJIT KUMAR GUPTA
 
spColumn-Manual design column by spcolumn software.pdf
spColumn-Manual design column by spcolumn software.pdfspColumn-Manual design column by spcolumn software.pdf
spColumn-Manual design column by spcolumn software.pdfChan Thorn
 
Bit Dhrumi shah Graphic Designer portfolio
Bit Dhrumi shah Graphic Designer portfolioBit Dhrumi shah Graphic Designer portfolio
Bit Dhrumi shah Graphic Designer portfoliodhrumibshah13
 
Dos And Dont's Of Logo Design For 2024..
Dos And Dont's Of Logo Design For 2024..Dos And Dont's Of Logo Design For 2024..
Dos And Dont's Of Logo Design For 2024..GB Logo Design
 
Knowing, Understanding and Planning Cities- Role and Relevance Physical Plan...
Knowing, Understanding and Planning Cities- Role and Relevance  Physical Plan...Knowing, Understanding and Planning Cities- Role and Relevance  Physical Plan...
Knowing, Understanding and Planning Cities- Role and Relevance Physical Plan...JIT KUMAR GUPTA
 
FW25-26 Fashion Key Items Trend Book Peclers Paris
FW25-26 Fashion Key Items Trend Book Peclers ParisFW25-26 Fashion Key Items Trend Book Peclers Paris
FW25-26 Fashion Key Items Trend Book Peclers ParisPeclers Paris
 
一比一原版谢菲尔德大学毕业证成绩单如何办理
一比一原版谢菲尔德大学毕业证成绩单如何办理一比一原版谢菲尔德大学毕业证成绩单如何办理
一比一原版谢菲尔德大学毕业证成绩单如何办理cyebo
 
Week of Action 2022_EIT Climate-KIC_Headers
Week of Action 2022_EIT Climate-KIC_HeadersWeek of Action 2022_EIT Climate-KIC_Headers
Week of Action 2022_EIT Climate-KIC_Headersekinlvnt
 
Spring 2024 wkrm_Enhancing Campus Mobility.pdf
Spring 2024 wkrm_Enhancing Campus Mobility.pdfSpring 2024 wkrm_Enhancing Campus Mobility.pdf
Spring 2024 wkrm_Enhancing Campus Mobility.pdfJon Freach
 
Presentation on 3D Printing.pptx presentation
Presentation on 3D Printing.pptx presentationPresentation on 3D Printing.pptx presentation
Presentation on 3D Printing.pptx presentationajroy0196
 
Heuristic Evaluation of System & Application
Heuristic Evaluation of System & ApplicationHeuristic Evaluation of System & Application
Heuristic Evaluation of System & ApplicationJaime Brown
 
Recycled Modular Low Cost Construction .pdf
Recycled Modular Low Cost Construction .pdfRecycled Modular Low Cost Construction .pdf
Recycled Modular Low Cost Construction .pdfjeffreycarroll14
 
iF_Design_Trend_Report_twentytwenrythree
iF_Design_Trend_Report_twentytwenrythreeiF_Design_Trend_Report_twentytwenrythree
iF_Design_Trend_Report_twentytwenrythreeCarlgaming1
 
Design lessons from Singapore | Volume 3
Design lessons from Singapore | Volume 3Design lessons from Singapore | Volume 3
Design lessons from Singapore | Volume 3Remy Rey De Barros
 
The Impact of Artificial Intelligence on Modern Healthcare.pptx
The Impact of Artificial Intelligence on Modern Healthcare.pptxThe Impact of Artificial Intelligence on Modern Healthcare.pptx
The Impact of Artificial Intelligence on Modern Healthcare.pptxDoraemon495609
 
Eric Parein CV. Parein in English is best pronounced as PARE-IN
Eric Parein CV. Parein in English is best pronounced as PARE-INEric Parein CV. Parein in English is best pronounced as PARE-IN
Eric Parein CV. Parein in English is best pronounced as PARE-INEric Parein
 

Recently uploaded (20)

NO1 Popular kala jadu karne wale ka contact number kala jadu karne wale baba ...
NO1 Popular kala jadu karne wale ka contact number kala jadu karne wale baba ...NO1 Popular kala jadu karne wale ka contact number kala jadu karne wale baba ...
NO1 Popular kala jadu karne wale ka contact number kala jadu karne wale baba ...
 
Claire's designing portfolio presentation
Claire's designing portfolio presentationClaire's designing portfolio presentation
Claire's designing portfolio presentation
 
Abdulaziz Tariq Abdulaziz Mustafa CV 2024
Abdulaziz Tariq Abdulaziz Mustafa CV 2024Abdulaziz Tariq Abdulaziz Mustafa CV 2024
Abdulaziz Tariq Abdulaziz Mustafa CV 2024
 
Heidi Livengood's Professional CADD Portfolio
Heidi Livengood's Professional CADD PortfolioHeidi Livengood's Professional CADD Portfolio
Heidi Livengood's Professional CADD Portfolio
 
Redefining Globalization, urbanisation and Localisation
Redefining Globalization, urbanisation and LocalisationRedefining Globalization, urbanisation and Localisation
Redefining Globalization, urbanisation and Localisation
 
spColumn-Manual design column by spcolumn software.pdf
spColumn-Manual design column by spcolumn software.pdfspColumn-Manual design column by spcolumn software.pdf
spColumn-Manual design column by spcolumn software.pdf
 
Bit Dhrumi shah Graphic Designer portfolio
Bit Dhrumi shah Graphic Designer portfolioBit Dhrumi shah Graphic Designer portfolio
Bit Dhrumi shah Graphic Designer portfolio
 
Dos And Dont's Of Logo Design For 2024..
Dos And Dont's Of Logo Design For 2024..Dos And Dont's Of Logo Design For 2024..
Dos And Dont's Of Logo Design For 2024..
 
Knowing, Understanding and Planning Cities- Role and Relevance Physical Plan...
Knowing, Understanding and Planning Cities- Role and Relevance  Physical Plan...Knowing, Understanding and Planning Cities- Role and Relevance  Physical Plan...
Knowing, Understanding and Planning Cities- Role and Relevance Physical Plan...
 
FW25-26 Fashion Key Items Trend Book Peclers Paris
FW25-26 Fashion Key Items Trend Book Peclers ParisFW25-26 Fashion Key Items Trend Book Peclers Paris
FW25-26 Fashion Key Items Trend Book Peclers Paris
 
一比一原版谢菲尔德大学毕业证成绩单如何办理
一比一原版谢菲尔德大学毕业证成绩单如何办理一比一原版谢菲尔德大学毕业证成绩单如何办理
一比一原版谢菲尔德大学毕业证成绩单如何办理
 
Week of Action 2022_EIT Climate-KIC_Headers
Week of Action 2022_EIT Climate-KIC_HeadersWeek of Action 2022_EIT Climate-KIC_Headers
Week of Action 2022_EIT Climate-KIC_Headers
 
Spring 2024 wkrm_Enhancing Campus Mobility.pdf
Spring 2024 wkrm_Enhancing Campus Mobility.pdfSpring 2024 wkrm_Enhancing Campus Mobility.pdf
Spring 2024 wkrm_Enhancing Campus Mobility.pdf
 
Presentation on 3D Printing.pptx presentation
Presentation on 3D Printing.pptx presentationPresentation on 3D Printing.pptx presentation
Presentation on 3D Printing.pptx presentation
 
Heuristic Evaluation of System & Application
Heuristic Evaluation of System & ApplicationHeuristic Evaluation of System & Application
Heuristic Evaluation of System & Application
 
Recycled Modular Low Cost Construction .pdf
Recycled Modular Low Cost Construction .pdfRecycled Modular Low Cost Construction .pdf
Recycled Modular Low Cost Construction .pdf
 
iF_Design_Trend_Report_twentytwenrythree
iF_Design_Trend_Report_twentytwenrythreeiF_Design_Trend_Report_twentytwenrythree
iF_Design_Trend_Report_twentytwenrythree
 
Design lessons from Singapore | Volume 3
Design lessons from Singapore | Volume 3Design lessons from Singapore | Volume 3
Design lessons from Singapore | Volume 3
 
The Impact of Artificial Intelligence on Modern Healthcare.pptx
The Impact of Artificial Intelligence on Modern Healthcare.pptxThe Impact of Artificial Intelligence on Modern Healthcare.pptx
The Impact of Artificial Intelligence on Modern Healthcare.pptx
 
Eric Parein CV. Parein in English is best pronounced as PARE-IN
Eric Parein CV. Parein in English is best pronounced as PARE-INEric Parein CV. Parein in English is best pronounced as PARE-IN
Eric Parein CV. Parein in English is best pronounced as PARE-IN
 

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