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.

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