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

   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