[CROATIAN] IA – reality, not a dream @ WIAD Zagreb

There are no "cheap" websites, there are only "bad" websites. You have probably heard about terms such as UX, UI, IA, but what are they really and can we use the essential ideas that are hidden behind those letters on every project? We will talk about how to keep to a (smaller) budget and consider information architecture and page content. Information architecture is not only a buzzword that means "more money for your work"; it represents consistency to which we should aspire. In the end, it means better value for both your client and website visitor.

wiad.hr

Emanuel & Lucijan Blagonić

Transcript

1. IA – java, a ne san Emanuel & Lucijan Blagonić Blagonić Brothers/Tailored Development WIAD Zagreb, 15. 02. 2014.
2. “ Information architecture is the art and science of organizing and labeling data including: websites, intranets, online communities, software, books and other mediums of information, to develop usability and structural aesthetics.
3. 1981 / 1986
4. http://www.flickr.com/photos/ul_digital_library/10922274335/ Što je to računalo?
5. Što radi arhitekt? http://www.flickr.com/photos/mississippi-dept-of-archives-and-history/9661756807/
6. Što radi IA? http://www.flickr.com/photos/usnationalarchives/6990406474/
7. Zašto je IA važan? I kod manjih projekata...
8. ⚙ Dulje zadržavanje na stranici ⚙ Bolju konverziju ⚙ Manji bounce rate ⚙ Drukčiji od konkurencije Što dobivaju klijenti?
9. Edukacija (i nas i klijenata)
10. http://nos.twnsnd.co/image/75702150061 Razgovor
11. http://www.flickr.com/photos/nationalmediamuseum/7649950230/ Inicijalni interview
12. NE! NE!
13. Ali, imamo sve više pozitivnih primjera
14. (R)Evolucija našeg procesa
15. Ugrađivanje IA u cijeli naš proces
16. Planiranje unaprijed
17. Kompleksnija baza podataka koja ne prikazuje sve informacije
18. Što klijent želi za 2, 3 ili 5 godina?
19. UX UI + IA
20. Elements collage bez povjerenja nema smisla
21. Clients Change™ Even in Croatia™
22. http://nos.twnsnd.co/image/75161327565 Vi ste stručnjaci
23. A sada... Lucijan :)
24. Pripremanje sadržaja http://www.flickr.com/photos/usnationalarchives/7158238104/
25. Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, dolore explicabo ut tenetur perferendis obcaecati? Vel, porro voluptas nostrum necessitatibus.
26. http://slipsum.com/
27. Dropbox Jedan folder predstavlja jednu stranicu. Nestani folderi su podstranice. Folderi mogu sadržavati slike, PDF-ove... http://www.emanuelblagonic.com/2014/01/21/using-dropbox-to-help-clients-organize-their-web-sitemap/
29. Tablični sadržaj Kompleksniji sadržaj (npr. popis poslovnica) je najbolje strukturirati koristeći tablice: Excel, Numbers, Google Docs (Spreadsheet)...
30. Adaptivan sadržaj Ideja “jednog weba” — pristupačan sadržaj na svim uređajima (universal access).
31. “ You should aim for content parity between your desktop and your mobile experiences— maybe not exactly the same content presented exactly the same way, but essentially the same experience. Karen McGrane
33. “ Get your content ready to go anywhere because it's going to go everywhere. Brad Frost
34. Strukturirani sadržaj Pravilno strukturirani sadržaj omogućuje bolju kontrolu i način prikaza na različitim ekranima. Chunk vs. Blob
36. “ With adaptive content, your goal is to create a flexible base of content with a variety of structured content objects to cover a wide range of uses and contexts. Karen McGrane
37. Skica / Wireframe / Prototip http://www.flickr.com/photos/usnationalarchives/7455145894/
38. ⚙ OIovka i papir ⚙ Whiteboard i flomasteri ⚙ Balsamiq, Moqups... ⚙ Illustrator ⚙ InDesign ⚙ HTML/CSS/JS ⚙ Keynote ⚙ ... Odaberite alat
39. HTML / CSS / JS Prednost testiranja u realnim uvjetima.
40. Postavimo prioritete Fokusiramo se na bitno — navigacija, primarni i sekundarni sadržaj, struktura stranice...
41. Zanemarimo detalje Ne zamaramo se “vizualnim” detaljima, već time kako se sadržaj prikazuje na stranici (prototipu).
42. Budući temelj Bez obzira na brzu izradu, dijelove koda možemo koristiti i u završnom proizvodu tj. postepeno poboljšavajući izdvojene dijelove stranice.
43. Struktura vs. Prezentacija http://www.flickr.com/photos/nai_collection/9771643556/lightbox/
44. No–CSS Kako to vide preglednici, pretraživači, screen readeri...
46. CSS Zen Garden Isti sadržaj (HTML), a toliko različitih vizualnih pristupa mijenjajući samo jednu datoteku i pozadinske slike.
50. Modularna arhitektura http://nos.twnsnd.co/image/60550363656
51. Moduli/Widgeti Arhive, novosti, galerije, slideri...
53. Styleguide Sve na jednom mjestu. “Knjiga standarda” web stranice.
54. Code for America style.codeforamerica.org
55. Accessibility http://www.flickr.com/photos/61498590@N03/5710937421/
56. WCAG Web Content Accessibility Guidelines
57. Adaptable Create content that can be presented in different ways (for example simpler layout) without losing information or structure. WCAG 2.0 Quick Reference List
60. Predictable Make Web pages appear and operate in predictable ways. WCAG 2.0 Quick Reference List
62. Readable Make text content readable and understandable. WCAG 2.0 Quick Reference List
63. Star Trek Star Trek is noted for its influence on the world outside of science fiction. It has been cited as an inspiration for several technological inventions such as the cell phone. Moreover, the show is noted for its progressive civil rights stances. The original series included one of television's first multiracial casts, and the first televised inter-racial kiss. Star Trek references can be found throughout popular culture from movies such as the submarine thriller Crimson Tide to the cartoon series South Park. 45–75 characters # 61 64 59 64 63 60 56 58 26
64. Navigable Provide ways to help users navigate, find content, and determine where they are. WCAG 2.0 Quick Reference List
65. Breadcrumbs Search Navigation Login
66. ARIA Accessible Rich Internet Applications
67. ⚙ Header [banner] ⚙ Footer [contentinfo] ⚙ Navigacija [navigation] ⚙ Pretraživanje [search] ⚙ Primarni sadržaj [main] ⚙ Sekundarni sadržaj [complementary] ⚙ ... Landmarks
68. Budućnost http://www.flickr.com/photos/smithsonian/6351080300/
69. ⚙ Educirati klijente ⚙ Testirati pretpostavke ⚙ Planirati budućnost sadržaja Što možemo učiniti odmah?
70. http://www.flickr.com/photos/62173425@N02/6328404899/ Hvala Imate li pitanja?