SlideShare una empresa de Scribd logo
1 de 21
Descargar para leer sin conexión
Usability a gyakorlatban           About
– drótvázak és a design
kapcsolata

                                   Attila BANKI
                                   www.digitallife.blog.hu
                                   cyber.cheguevra@gmail.com
A reklámokhoz mindenki ért. De a
webergonómiához nem.
A prezi célja:


                 Bemutatni a drótázból készülő design egyes nehézségeit

                      A UX folyamat tervezési részének ismertetése

                                Tippek trükkök, hibák….
Néhány szó az adott feladatról


                        • Egy webes portál látogatottságának növelése
                        • A látogatók jelentős része a Facebookról érkezik, így a FB
      Látogatottság
         növelés          csoport méretének jelentős növelése


                        • A lehető legtöbb LIKE elérése egy applikáción keresztül
      LIKE és talking   • A lehető legtöbb ember meginvitálása LIKE-olásra
      value növelés



                        • A friss LIKE-olók különböző közösségekbe irányítása
       Közösségbe       • A friss LIKE-olók aktiválása
        migrálás
A Facebook app. nyitó              About
oldalának evolúciója


                                   Attila BANKI
                                   www.digitallife.blog.hu
                                   cyber.cheguevra@gmail.com
A reklámokhoz mindenki ért. De a
webergonómiához nem.
A FB app. nyitó oldal evolúciója
                              A drótvázak alakulását korábban
                              már ismertettük.
     1. állapot
A FB app. nyitó oldal evolúciója
                              A drótvázak alakulását korábban
                              már ismertettük.
     2. állapot
Első körös design
                                         • Nem követi a drótvázat, ami
                                            kockázatot jelent


A FB app. nyitó oldal evolúciója

     3. állapot                                                                  Első körös design
                                                                                 • A LIKE-ra buzdító felirat
                                                                                    gombszerű, ami megtévesztő és
                                                                                    és nem tölti be a funkcióját
                                                                                 • Valamint kiderült, hogy teljesen
                                                                                    felesleges ezen az oldalon


                                                                         Első körös design
                                                                         • A gomb nem igazán gombszerű
                                                                         • Nem üt el a háttértől
     Első körös design
     • Az inverz színek nem segítik az
        olvashatóságot
                                                                                Első körös design
                                                                                • A folyamat jelző alulra került,
                                                                                   ahol a user nem látja, és a
                                                                                   számozásból nem is derül ki,
                                                                                   hogy pontosan mi is a funkciója.
                                                                                   A user nem akar azon
                                                                                   gondolkodni, hogy ez vajon mi
                                                                                   lehet.
A FB app. nyitó oldal evolúciója

            4. állapot

Második körös design
• Ez már követi a drótvázat
A FB app. nyitó oldal evolúciója

            5. állapot

A drótvázon alapuló layout
A Facebook app. belső              About
oldalának evolúciója


                                   Attila BANKI
                                   www.digitallife.blog.hu
                                   cyber.cheguevra@gmail.com
A reklámokhoz mindenki ért. De a
webergonómiához nem.
A FB app. belső oldal evolúciója

            1. állapot
A drótvázak alakulását korábban
már ismertettük.
A FB app. belső oldal evolúciója

     2. állapot
Első körös design
                                         • Nem követi a drótvázat, ami
                                            kockázatot jelent


A FB app. belső oldal evolúciója

     3. állapot                                                              A LIKE gomb teljesen felesleges és
                                                                             szükségtelen.
                                                                             Ez az elem már a drótvázon sem
                                                                             szerepelt, hibaként jelent meg a
                                                                             tervben.




                                                                         Első körös design
                                                                         • A gomb nem igazán gombszerű
     Első körös design                                                   • Nem üt el a háttértől
     • Az inverz színek nem segítik az
        olvashatóságot
                                                                         Első körös design
                                                                         • A folyamat jelző alulra került,
                                                                            ahol a user nem látja, és a
                                                                            számozásból nem is derül ki,
                                                                            hogy pontosan mi is a funkciója.
                                                                            A user nem akar azon
                                                                            gondolkodni, hogy ez vajon mi
                                                                            lehet.
Második körös design
                                   • Ez már követi a drótvázat




 A FB app. belső oldal evolúciója

          3. állapot



Második körös design
• A képarányok miatt (a források
  adottásgai voltak) eltértünk
  csekély mértékben a képi elem
  méretétől.
A Facebook app.                    About
megoldás oldalának
evolúciója

                                   Attila BANKI
                                   www.digitallife.blog.hu
                                   cyber.cheguevra@gmail.com
A reklámokhoz mindenki ért. De a
webergonómiához nem.
A FB app. megoldás oldal evolúciója

            1. állapot
A drótvázak alakulását korábban
már ismertettük.
A FB app. megoldás oldal evolúciója

            2. állapot
A funkcionális specifikáció
hiányosságai és kiforratlanságai
miatt újabb funkció került a
drótvázba.
A FB app. megoldás oldal evolúciója

    3. állapot                        A végleges drótváz kialakításánál
                                      kettős konverziós pont alakult, ki
                                      ami nem volt szerencsés:
                                      1., LIKE gomb
                                      2., Ingyenes tanfolyam
A FB app. megoldás oldal evolúciója

    4. állapot drótváztól eltért az első
          Az eredeti
          körös layout, ami zsákutcának
          bizonyult a felhasználó
          szemmozgása miatt.
A FB app. megoldás oldal evolúciója

                 A végleges layout teljes egészében a
    5. állapot   drótvázat követte. A felhasználó
                 szemmozgása megoldásra került
                 egy lineáris path-szal.
Kapcsolat




            cyber.cheguevara@gmail.com

            attila_banki

            Subscribe on Facebook: www.facebook.com/attila.banki

            http://www.linkedin.com/in/attilabanki

Más contenido relacionado

Destacado

How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024Albert Qian
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsKurio // The Social Media Age(ncy)
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Search Engine Journal
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summarySpeakerHub
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next Tessa Mero
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentLily Ray
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best PracticesVit Horky
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project managementMindGenius
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...RachelPearson36
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Applitools
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at WorkGetSmarter
 
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...DevGAMM Conference
 
Barbie - Brand Strategy Presentation
Barbie - Brand Strategy PresentationBarbie - Brand Strategy Presentation
Barbie - Brand Strategy PresentationErica Santiago
 
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them wellGood Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them wellSaba Software
 
Introduction to C Programming Language
Introduction to C Programming LanguageIntroduction to C Programming Language
Introduction to C Programming LanguageSimplilearn
 

Destacado (20)

How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work
 
ChatGPT webinar slides
ChatGPT webinar slidesChatGPT webinar slides
ChatGPT webinar slides
 
More than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike RoutesMore than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike Routes
 
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
 
Barbie - Brand Strategy Presentation
Barbie - Brand Strategy PresentationBarbie - Brand Strategy Presentation
Barbie - Brand Strategy Presentation
 
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them wellGood Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
 
Introduction to C Programming Language
Introduction to C Programming LanguageIntroduction to C Programming Language
Introduction to C Programming Language
 

Usability és design

  • 1. Usability a gyakorlatban About – drótvázak és a design kapcsolata Attila BANKI www.digitallife.blog.hu cyber.cheguevra@gmail.com A reklámokhoz mindenki ért. De a webergonómiához nem.
  • 2. A prezi célja: Bemutatni a drótázból készülő design egyes nehézségeit A UX folyamat tervezési részének ismertetése Tippek trükkök, hibák….
  • 3. Néhány szó az adott feladatról • Egy webes portál látogatottságának növelése • A látogatók jelentős része a Facebookról érkezik, így a FB Látogatottság növelés csoport méretének jelentős növelése • A lehető legtöbb LIKE elérése egy applikáción keresztül LIKE és talking • A lehető legtöbb ember meginvitálása LIKE-olásra value növelés • A friss LIKE-olók különböző közösségekbe irányítása Közösségbe • A friss LIKE-olók aktiválása migrálás
  • 4. A Facebook app. nyitó About oldalának evolúciója Attila BANKI www.digitallife.blog.hu cyber.cheguevra@gmail.com A reklámokhoz mindenki ért. De a webergonómiához nem.
  • 5. A FB app. nyitó oldal evolúciója A drótvázak alakulását korábban már ismertettük. 1. állapot
  • 6. A FB app. nyitó oldal evolúciója A drótvázak alakulását korábban már ismertettük. 2. állapot
  • 7. Első körös design • Nem követi a drótvázat, ami kockázatot jelent A FB app. nyitó oldal evolúciója 3. állapot Első körös design • A LIKE-ra buzdító felirat gombszerű, ami megtévesztő és és nem tölti be a funkcióját • Valamint kiderült, hogy teljesen felesleges ezen az oldalon Első körös design • A gomb nem igazán gombszerű • Nem üt el a háttértől Első körös design • Az inverz színek nem segítik az olvashatóságot Első körös design • A folyamat jelző alulra került, ahol a user nem látja, és a számozásból nem is derül ki, hogy pontosan mi is a funkciója. A user nem akar azon gondolkodni, hogy ez vajon mi lehet.
  • 8. A FB app. nyitó oldal evolúciója 4. állapot Második körös design • Ez már követi a drótvázat
  • 9. A FB app. nyitó oldal evolúciója 5. állapot A drótvázon alapuló layout
  • 10. A Facebook app. belső About oldalának evolúciója Attila BANKI www.digitallife.blog.hu cyber.cheguevra@gmail.com A reklámokhoz mindenki ért. De a webergonómiához nem.
  • 11. A FB app. belső oldal evolúciója 1. állapot A drótvázak alakulását korábban már ismertettük.
  • 12. A FB app. belső oldal evolúciója 2. állapot
  • 13. Első körös design • Nem követi a drótvázat, ami kockázatot jelent A FB app. belső oldal evolúciója 3. állapot A LIKE gomb teljesen felesleges és szükségtelen. Ez az elem már a drótvázon sem szerepelt, hibaként jelent meg a tervben. Első körös design • A gomb nem igazán gombszerű Első körös design • Nem üt el a háttértől • Az inverz színek nem segítik az olvashatóságot Első körös design • A folyamat jelző alulra került, ahol a user nem látja, és a számozásból nem is derül ki, hogy pontosan mi is a funkciója. A user nem akar azon gondolkodni, hogy ez vajon mi lehet.
  • 14. Második körös design • Ez már követi a drótvázat A FB app. belső oldal evolúciója 3. állapot Második körös design • A képarányok miatt (a források adottásgai voltak) eltértünk csekély mértékben a képi elem méretétől.
  • 15. A Facebook app. About megoldás oldalának evolúciója Attila BANKI www.digitallife.blog.hu cyber.cheguevra@gmail.com A reklámokhoz mindenki ért. De a webergonómiához nem.
  • 16. A FB app. megoldás oldal evolúciója 1. állapot A drótvázak alakulását korábban már ismertettük.
  • 17. A FB app. megoldás oldal evolúciója 2. állapot A funkcionális specifikáció hiányosságai és kiforratlanságai miatt újabb funkció került a drótvázba.
  • 18. A FB app. megoldás oldal evolúciója 3. állapot A végleges drótváz kialakításánál kettős konverziós pont alakult, ki ami nem volt szerencsés: 1., LIKE gomb 2., Ingyenes tanfolyam
  • 19. A FB app. megoldás oldal evolúciója 4. állapot drótváztól eltért az első Az eredeti körös layout, ami zsákutcának bizonyult a felhasználó szemmozgása miatt.
  • 20. A FB app. megoldás oldal evolúciója A végleges layout teljes egészében a 5. állapot drótvázat követte. A felhasználó szemmozgása megoldásra került egy lineáris path-szal.
  • 21. Kapcsolat cyber.cheguevara@gmail.com attila_banki Subscribe on Facebook: www.facebook.com/attila.banki http://www.linkedin.com/in/attilabanki