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ć

Lucijan Blagonić

February 15, 2014
Tweet

More Decks by Lucijan Blagonić

Other Decks in Design

Transcript

  1. IA – java, a ne san
    Emanuel & Lucijan Blagonić
    Blagonić Brothers/Tailored Development
    WIAD
    Zagreb, 15. 02. 2014.

    View Slide


  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.

    View Slide

  3. 1981 / 1986

    View Slide

  4. http://www.flickr.com/photos/ul_digital_library/10922274335/
    Što je to računalo?

    View Slide

  5. Što radi arhitekt?
    http://www.flickr.com/photos/mississippi-dept-of-archives-and-history/9661756807/

    View Slide

  6. Što radi IA?
    http://www.flickr.com/photos/usnationalarchives/6990406474/

    View Slide

  7. Zašto je IA važan?
    I kod manjih projekata...

    View Slide

  8. ⚙ Dulje zadržavanje na stranici
    ⚙ Bolju konverziju
    ⚙ Manji bounce rate
    ⚙ Drukčiji od konkurencije
    Što dobivaju klijenti?

    View Slide

  9. Edukacija
    (i nas i klijenata)

    View Slide

  10. http://nos.twnsnd.co/image/75702150061
    Razgovor

    View Slide

  11. http://www.flickr.com/photos/nationalmediamuseum/7649950230/
    Inicijalni interview

    View Slide

  12. NE!
    NE!

    View Slide

  13. Ali, imamo sve više
    pozitivnih primjera

    View Slide

  14. (R)Evolucija
    našeg procesa

    View Slide

  15. Ugrađivanje IA u
    cijeli naš proces

    View Slide

  16. Planiranje unaprijed

    View Slide

  17. Kompleksnija baza podataka
    koja ne prikazuje sve
    informacije

    View Slide

  18. Što klijent želi za 2, 3 ili 5
    godina?

    View Slide

  19. UX
    UI + IA

    View Slide

  20. Elements collage
    bez povjerenja nema smisla

    View Slide

  21. Clients Change™
    Even in Croatia™

    View Slide

  22. http://nos.twnsnd.co/image/75161327565
    Vi ste stručnjaci

    View Slide

  23. A sada... Lucijan :)

    View Slide

  24. Pripremanje sadržaja
    http://www.flickr.com/photos/usnationalarchives/7158238104/

    View Slide

  25. Lorem ipsum
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Delectus, dolore explicabo ut tenetur perferendis obcaecati?
    Vel, porro voluptas nostrum necessitatibus.

    View Slide

  26. http://slipsum.com/

    View Slide

  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/

    View Slide

  28. View Slide

  29. Tablični sadržaj
    Kompleksniji sadržaj (npr. popis poslovnica) je najbolje
    strukturirati koristeći tablice: Excel, Numbers,
    Google Docs (Spreadsheet)...

    View Slide

  30. Adaptivan sadržaj
    Ideja “jednog weba” — pristupačan sadržaj na svim uređajima
    (universal access).

    View Slide


  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

    View Slide

  32. View Slide


  33. Get your content ready to go anywhere
    because it's going to go everywhere.
    Brad Frost

    View Slide

  34. Strukturirani sadržaj
    Pravilno strukturirani sadržaj omogućuje bolju kontrolu i način
    prikaza na različitim ekranima. Chunk vs. Blob

    View Slide

  35. View Slide


  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

    View Slide

  37. Skica / Wireframe / Prototip
    http://www.flickr.com/photos/usnationalarchives/7455145894/

    View Slide

  38. ⚙ OIovka i papir
    ⚙ Whiteboard i flomasteri
    ⚙ Balsamiq, Moqups...
    ⚙ Illustrator
    ⚙ InDesign
    ⚙ HTML/CSS/JS
    ⚙ Keynote
    ⚙ ...
    Odaberite alat

    View Slide

  39. HTML / CSS / JS
    Prednost testiranja u realnim uvjetima.

    View Slide

  40. Postavimo prioritete
    Fokusiramo se na bitno — navigacija, primarni i sekundarni
    sadržaj, struktura stranice...

    View Slide

  41. Zanemarimo detalje
    Ne zamaramo se “vizualnim” detaljima, već time kako se sadržaj
    prikazuje na stranici (prototipu).

    View Slide

  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.

    View Slide

  43. Struktura vs. Prezentacija
    http://www.flickr.com/photos/nai_collection/9771643556/lightbox/

    View Slide

  44. No–CSS
    Kako to vide preglednici, pretraživači, screen readeri...

    View Slide

  45. View Slide

  46. CSS Zen Garden
    Isti sadržaj (HTML), a toliko različitih vizualnih pristupa mijenjajući
    samo jednu datoteku i pozadinske slike.

    View Slide

  47. View Slide

  48. View Slide

  49. View Slide

  50. Modularna arhitektura
    http://nos.twnsnd.co/image/60550363656

    View Slide

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

    View Slide

  52. View Slide

  53. Styleguide
    Sve na jednom mjestu.
    “Knjiga standarda” web stranice.

    View Slide

  54. Code for America
    style.codeforamerica.org

    View Slide

  55. Accessibility
    http://www.flickr.com/photos/61498590@N03/5710937421/

    View Slide

  56. WCAG
    Web Content Accessibility Guidelines

    View Slide

  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

    View Slide

  58. View Slide

  59. View Slide

  60. Predictable
    Make Web pages appear and operate in predictable ways.
    WCAG 2.0 Quick Reference List

    View Slide

  61. View Slide

  62. Readable
    Make text content readable and understandable.
    WCAG 2.0 Quick Reference List

    View Slide

  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

    View Slide

  64. Navigable
    Provide ways to help users navigate, find content, and
    determine where they are.
    WCAG 2.0 Quick Reference List

    View Slide

  65. Breadcrumbs
    Search
    Navigation
    Login

    View Slide

  66. ARIA
    Accessible Rich Internet Applications

    View Slide

  67. ⚙ Header [banner]
    ⚙ Footer [contentinfo]
    ⚙ Navigacija [navigation]
    ⚙ Pretraživanje [search]
    ⚙ Primarni sadržaj [main]
    ⚙ Sekundarni sadržaj [complementary]
    ⚙ ...
    Landmarks

    View Slide

  68. Budućnost
    http://www.flickr.com/photos/smithsonian/6351080300/

    View Slide

  69. ⚙ Educirati klijente
    ⚙ Testirati pretpostavke
    ⚙ Planirati budućnost sadržaja
    Što možemo učiniti odmah?

    View Slide

  70. http://www.flickr.com/photos/62173425@N02/6328404899/
    Hvala
    Imate li pitanja?

    View Slide