Upgrade to Pro — share decks privately, control downloads, hide ads and more …

IA for WordPress - Lena Lekkou

IA for WordPress - Lena Lekkou

WordCamp Thessaloniki 2018

Η Λένα στην παρουσίασή της θα μας μιλήσει για Information Architecture για το WordPress, αναφέροντας και επεξηγώντας μας 101 βασικές αρχές και τεχνικές Information Architecture για καλύτερα δομημένα Websites.

Lena in her presentation will talk to us about Information Architecture for WordPress, citing and explaining to us 101 Principles and Information Architecture techniques for better structured Websites.

A717e9d055b2284e573b2412e32f5397?s=128

WordPress Greek Community

December 15, 2018
Tweet

Transcript

  1. @lenalekkou IA for WordPress | WordCamp Thessaloniki ’18

  2. @lenalekkou IA for WordPress | WordCamp Thessaloniki ’18 I started

    from Interior Design & experienced with Set Design so that I move on to Graphic Design and continue to Web Design so that I find the beauty in UX Design and Interaction Design and implement it to Instructional Design. Hi! I am Lena!
  3. @lenalekkou IA for WordPress | WordCamp Thessaloniki ’18 I started

    from Interior Design & experienced with Set Design so that I move on to Graphic Design and continue to Web Design so that I find the beauty in UX Design and Interaction Design and implement it to Instructional Design. Hi! I am Lena! I just Design all kinds of Designs. : )
  4. @lenalekkou IA for WordPress | WordCamp Thessaloniki ’18 TODAY WE

    SUFFER FROM INFORMATION OVERLOAD With so much information available it’s very difficult to find the information you need and understand it once you found it.
  5. @lenalekkou IA for WordPress | WordCamp Thessaloniki ’18 It’s the

    ideal Structure of the Website and its Content. It’s a design discipline that is focused on making information Findable and Understandable. IA (and not AI) IA means Information Architecture
  6. @lenalekkou IA for WordPress | WordCamp Thessaloniki ’18 INFORMATION ECOLOGY

    Venn Diagram There is a connection between Context, Content & Users within a complex adaptive Information Ecology.
  7. @lenalekkou IA for WordPress | WordCamp Thessaloniki ’18 INFORMATION ARCHITECTURE

    IA feeds Design, Development, SEO, Content Creation and vice versa.
  8. @lenalekkou IA for WordPress | WordCamp Thessaloniki ’18 JUST BECAUSE

    YOU CAN’T SEE IT, DOESN’T MEAN IT ISN’T THERE
  9. @lenalekkou IA for WordPress | WordCamp Thessaloniki ’18 WORDPRESS IA

    IA Parts of WordPress are: First Level Second Level
  10. @lenalekkou IA for WordPress | WordCamp Thessaloniki ’18 IA &

    WORDPRESS Can do magic!
  11. @lenalekkou IA for WordPress | WordCamp Thessaloniki ’18 But first…..

    CASE STUDY A COOKING WEBSITE The brief : The Website is about the hipster-est Chef in the world! Cool Cocktails, Burgers and Healthy Vegan recipes all in one awesome place!
  12. @lenalekkou IA for WordPress | WordCamp Thessaloniki ’18 YOU ARE

    NOT YOUR USER You don’t Design & Develop a Website for yourself or for your client but for the End Users!
  13. @lenalekkou IA for WordPress | WordCamp Thessaloniki ’18 THE DESING

    THINKING PROCESS Be careful it’s not a waterfall process
  14. @lenalekkou IA for WordPress | WordCamp Thessaloniki ’18 DESIGN THINKING

    CAN BE USED LITERALLY ANYWHERE AND FROM ANYONE
  15. @lenalekkou IA for WordPress | WordCamp Thessaloniki ’18 STEP #1

    EMPATHIZE Learn about your End Users Define the Challenge Explore the Human Context Use your Brain & your Heart Don’t be afraid at this point to search for other websites with similar content and explore them
  16. @lenalekkou IA for WordPress | WordCamp Thessaloniki ’18 STEP #2

    PERSONAS Who will use this website? Why they will use it? What exactly will they do? When they will use it? Define your Personas for your Project
  17. @lenalekkou IA for WordPress | WordCamp Thessaloniki ’18 STEP #3

    DEFINE Make the connections between what the users need and which path they will follow in order to find it. Make Sketches , Diagrams, Journey Maps
  18. @lenalekkou IA for WordPress | WordCamp Thessaloniki ’18 STEP #4

    IDEATE What’s the different Users’ Paths? Don’t forget that users don’t always land in your website from the homepage. How do we help them?
  19. @lenalekkou IA for WordPress | WordCamp Thessaloniki ’18 IA STARTS

    WITH PEOPLE AND THE REASON THEY VISIT YOUR WEBSITE, THEY HAVE AN INFORMATION NEED
  20. @lenalekkou IA for WordPress | WordCamp Thessaloniki ’18 Hipster -CHEF-

    How are users searching for recipes? Based on the ingredients? Based on the season? From the Menu? From the Search bar? From the Homepage? From a Bookmark? Based on critics? Because someone else recommend it? Based on the mood? From a Facebook post? All of the above? STEP #4 DESIGN FOR FINDING
  21. @lenalekkou IA for WordPress | WordCamp Thessaloniki ’18 Hipster -CHEF-

    STEP #4 DESIGN FOR FINDING
  22. @lenalekkou IA for WordPress | WordCamp Thessaloniki ’18 STEP #5

    HIERACHY & ORGANIZATION How the website will be structured? Make a Hierarchical Flowchart Be careful this is NOT the Main Menu
  23. @lenalekkou IA for WordPress | WordCamp Thessaloniki ’18 STEP #5

    HIERACHICAL FLOWCHART Hipster -CHEF- Zero Level
  24. @lenalekkou IA for WordPress | WordCamp Thessaloniki ’18 STEP #5

    HIERACHICAL FLOWCHART Hipster -CHEF- First Level
  25. @lenalekkou IA for WordPress | WordCamp Thessaloniki ’18 STEP #5

    HIERACHICAL FLOWCHART Hipster -CHEF- Second Level
  26. @lenalekkou IA for WordPress | WordCamp Thessaloniki ’18 STEP #6

    THE CONNECTIONS How different elements relate to one another? Identify elements that lives outside of this structure, that’s elements that is separate of the navigation of the site. Users won’t search separate for them in order to navigate to the website
  27. @lenalekkou IA for WordPress | WordCamp Thessaloniki ’18 STEP #6

    HIERACHICAL FLOWCHART Hipster -CHEF- Third Level
  28. @lenalekkou IA for WordPress | WordCamp Thessaloniki ’18 STEP #6

    THE CONNECTIONS Hipster -CHEF- Fourth Level
  29. @lenalekkou IA for WordPress | WordCamp Thessaloniki ’18 STEP #7

    USER NAVIGATION & FLOW Define the User Navigation and User Flow. This is the key for making the Main Menu of your website. Existing Menus Examples
  30. @lenalekkou IA for WordPress | WordCamp Thessaloniki ’18 EVERY WEBSITE

    HAS DIFFERENT MENU NAVIGATION BASED ON THE USERS’ NEEDS
  31. @lenalekkou IA for WordPress | WordCamp Thessaloniki ’18 STEP #8

    WP TEMPLATE HIERARCHY Now link all the elements of the IA structure with the WP Template Hierarchy. Which elements will need sorting? What priority order in every page will have? What elements must the User see first?
  32. @lenalekkou IA for WordPress | WordCamp Thessaloniki ’18 STEP #8

    WP TEMPLATE HIERARCHY Hipster -CHEF-
  33. @lenalekkou IA for WordPress | WordCamp Thessaloniki ’18 STEP #9

    PROTOTYPE & TEST IT! Does it work? What’s the feedback from the users? Card Sorting & Prototypes (Low-fi or High-Fi) is your friend : )
  34. @lenalekkou IA for WordPress | WordCamp Thessaloniki ’18 IS IT

    WORKING? GO TO STEP 10, IS IT NOT WORKING ITERATE AND REPEAT
  35. @lenalekkou IA for WordPress | WordCamp Thessaloniki ’18 Create a

    very detailed Website Template Map and add other details like categories, tags, meta, etc STEP #10 MAPPING YOUR FINAL WP WEBSITE STRUCTURE Yeap! Excel Sheets is the perfect choice here : }
  36. @lenalekkou IA for WordPress | WordCamp Thessaloniki ’18 Manage all

    of your content (images, copy, videos, links etc). Every asset and its attributes. STEP #11 WP CONTENT STRATEGY
  37. @lenalekkou IA for WordPress | WordCamp Thessaloniki ’18 ALL THESE

    BRINGS TO THE PROJECT & ITS PEOPLE CONSISTENCY & SIMPLIFICATION
  38. @lenalekkou IA for WordPress | WordCamp Thessaloniki ’18 AND OF

    COURSE YOU CREATE A MORE STRUCTURED EXPERIENCE FOR EVERYONE
  39. @lenalekkou IA for WordPress | WordCamp Thessaloniki ’18 THANK YOU!

    @lenalekkou