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

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

[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ć

2eaa540dfe93c83d61a8fafedec664ff?s=128

Lucijan Blagonić

February 15, 2014
Tweet

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/
  28. None
  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
  32. None
  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
  35. None
  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...

  45. None
  46. CSS Zen Garden Isti sadržaj (HTML), a toliko različitih vizualnih

    pristupa mijenjajući samo jednu datoteku i pozadinske slike.
  47. None
  48. None
  49. None
  50. Modularna arhitektura http://nos.twnsnd.co/image/60550363656

  51. Moduli/Widgeti Arhive, novosti, galerije, slideri...

  52. None
  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
  58. None
  59. None
  60. Predictable Make Web pages appear and operate in predictable ways.

    WCAG 2.0 Quick Reference List
  61. None
  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?