Web design Site
Site design • Ez határozza meg a keretet – Meg kell határozni ki célközönség – Mit akarunk elmondani – Hogyan rendezzük el a tartalmat
• A fő cél – A felhasználók igényeinek kielégítése • Nem a főnöké!!!
A szerkezet • A Weben legtöbb információ rövid részekből áll melyeket nem szekvenciálisan is lehet olvasni – Korábbi tapasztalata technikai íróknak • Az emberek a rövid, célratörő információkat kedvelik
• Kevés időt töltünk a web oldalakon • A képernyő egyébként is limitált méretű adatot tud megjeleníteni
Szöveg • Mi ezzel a probléma?
Kulcslyuk probléma • • • •
Nincs kontextus „Csőlátás” Elveszettek vagyunk Átvitt értelemben: – – – –
Hol vagyok? Hova mehetek? Hova akarok menni? Hogyan mehetek oda?
Navigálási stratégiák lehetnének • Csak részlet
• Nagyítás (Zoom)
• Áttekintés+Részlet
• Fókuszálás+Kontextus
• Több nézet
• Torzítás
Szerkezet • Szekvenciális
• Szekvenciális alelemekkel
Szerkezet • Hierarchia – Egyik legjobb elrendezés web oldalak esetén
Hierachia • Ha túl lapos („shallow”) a szerkezet akkor nagyon hosszú lesz a menü
Hierarchia • Ezt használjuk navigálásra egy menüvel • A siker attól függ mennyire sikerül a felhasználónak megfelelni – Konzisztens szerkezet segít az ismert oldalak alapján ismeretlen oldalak látogatását és felismerését
• Ne ez legyen a mentális model:
Hierachia • Túl mély menü rendszer esetén a tartalmat elrejtjük
Szerkezet • Hálós – Általában többféle gondolkodásmódot megenged – Asszoiatív – Sok link-el jár, és bár legjobban illeszkedik a Web-hez, de gyakran zavarodottsághoz vezet
Szerkezet Komplex Magasabban képzett közönség
Egyszerű Alap képzettség Tréning oldalak Lineáris, narratív, megjósólható szerkezet
Nem lineáris Flexibilis, Káoszhoz vezethez
Oldalak besorolása Komplex, hosszú
Kontakt idő a felhasználóval
Rövid, egyértelmű Lineáris
Nem lineáris
Narratíva
Tréning oldalak • Lineárisak • Kevés lehetőség van eltérni a vonaltól – Ne adjunk lehetőséget eltérni – Következő és Vissza gombok csak
• Adjuk meg milyen hosszú egy „modul” • Általában be kell lépni, mint egy kurzusra • Felhasználó adatok és eredmények adatbázist igényelnek
Tréning oldalak
Oktató oldalak • Ezek is egy erős narratívára épülnek – De több lehetőség van eltérni
• Tartalom jobban szerkesztett • Több link, akár külső oldalakra is – Ekkor érdemes őket csoportosítani
• Az anyagot lehet ki akarják nyomtatni
Oktató oldalak
Referencia oldalak • Nincs „történet” ami el kellene mondani • Csak beugrunk az oldalra és azonnal akarjuk a választ – Erős, gyors keresési lehetőségek – Gyors egyszerű letöltési lehetőség
• Kontakt idő minnél rövidebb annál jobb
Referencia oldalak
Szórakoztató és magazin oldalak • Olyan közönségnek szól akik érdeklődése nagyon széles – Valahogy mindenkit meg kellene ragadni
• Prezentálási módok is nagyban eltérnek • Hirdetések mint zavaró elemek
Szórakoztató és magazin oldalak
Hírportálok • Nyomtatott újsághoz hasonló • Bár a weben lehet hogy színesebb, gazdagabb
E-kommersz oldalak • Alapvető – Jó navigálás, – Keresés és – Milyen gyorsan jut el a felhasználó a megrendelésig • 1-Click szabadalom (Amazon)
• „Dot com” lufi – Túlélték a technikailag egyszerű és alapvető szolgáltatások • Amazon, eBay, Yahoo
E-kommersz oldalak
A „site” részei • • • • • •
Home page (kezdő lapok) Menük és aloldalak Site map Mi az új? (What is new?) Keresés (Search) Kapcsolat, elérhetőség és visszjelzés (Contact & feedback) • Hiba oldalak
Home page • • • •
Logikailga e köré szerveződik minden Ez a belépő kapu A hierachiában legfelül van Erre a legjobb analógia az újság – Pozíció számít • Lap felső felében van a legfontosabb információ
Home page
Még kis képernyőn is látható
Ide már lehet hogy le kell görgetni az ablakot
Home page • Álatlában a 4 lehetőség valamelyike – – – –
Menü home page Hír orientált home page Útat kijelölő home page Splash screen
• Ma már inkább keveréke
Menü home page • Legkorábbi web oldalak • Ma is sok ilyen van még
Hír orientált home page
Útat kijelölő home page • Path-based home page • Olyan komplex, hogy több módon lehet bejárni, attól függően mi az érdeklődés Mindenkit a megfelelő tartalomra irányít
Splash screen • Mint egy könyv fedlap • Sokan nem szeretik – Értékelni kell ki lesz a közönség és ők elfogadják-e
Kép vagy szöveg • Töltődési sebesség Óvatosan tervezett képek Csak szöveg
Oldalszerkezet • Grid – Gestalt elmélet, • minták létrehozása
• Home page és a többi oldal szerkezete eltérhet
Kaotikus
Szerkezete van
Oldalszerkezet, grid
Hiba oldalak • • • •
Mutatja mennyira jól van megcsinálva a site Stílusában egyezik a többi oldallal Esetleg felajánl magyarázatot hogy miért Linket ad – Kereséshez – Home page – Site index
Hiba oldalak
