Tessék hát megnézni, ha másért nem, hát inspirációért a saját weboldalhoz. Nézd meg a színeket, a betűtípusokat, a szép logókat, az egyedi layoutokat. És készülj fel a hossssssszzzú görgetésre.

10. Ha netalán tán háttérzene van az oldaladon, akkor azt legalább úgy csináld meg, hogy a látogató kikapcsolhassa azt, de JOBBAN TESZED, ha úgy csinálod meg, hogy a zene ne induljon el automatikusan. Nagyon sokan munkahelyről neteznek, és igen ciki, amikor hirtelen valami langyi zene megszólal, és a főnök bámulja kedves beosztottját, hogy mi lehet a gond. Ne okozzunk senkinek ilyen kellemetlen élményt. 

11. A szöveg alapú navigáció jobb, mint ha képekre írjuk az adott menüpont szövegét. CSS-sel már nagyon szépen meg lehet oldani a szöveg alapú navigációt is, gyorsabb is, mint ha minden menüpontnál meg kell várni, míg betölti az ún. hover képet. Persze használhatunk képeket (háttér, listakép stb.), de okosan tegyük. A dizájn inkább a tartalom jó elhelyezéséről szóljon, mint hogy telepakolgassuk képekkel az oldalt.

12. Inkább legyen egy jól struktúrált oldaltérképed, mint hogy extra bonyolult több szintű lenyíló menüket használj. Azok sosem működnek igazán jól. (Tisztelet a kivéltelnek. Nagyon ritka.) Ezek a több szintű bonyolult menük inkább azt mutatják, hogy aki kidolgozta az oldal felépítését, az nem is dolgozott vele igazán. 

13. Ha az oldaladnak szüksége van kereső funkcióra, akkor nyugodtan előről kezdheted, és visszaolvashatod az előző pontot. Az az oka. A keresők hasznosak, ez tény, és néhány oldalon igen fontos szerepet játszik, de ha egy átlag oldalon a látogató csak ezzel találja meg, amit akart, akkor az azt mutatja, hogy nem jó az oldal struktúrája. Ha logikusan van felépítve a navigáció, akkor (ha ott is van az opció, mint nálam), nem fogják használni a keresőt. Hagyjuk meg azért a lehetőséget azoknak, akik mélyen bele akarnak menni a jó sok tartalom mélyébe.

14. Mennyi idő alatt töltődik be az oldalad? Még ha gyors kábele vagy DSL-e van a látogatónak, akkor is lehet türelmetlen, mert hozzászokott a gyors betöltéshez. A kezdőoldaladat ne bonyolítsd túlságosan, ne pakold tele felesleges elemekkel, alkalmazásokkal. Azok csak növelik a betöltés idejét. 

15. Nyilvánvaló dolog, de sok (köhöm) dizájnernek mégsem: ne rejtsük el a cél felé vezető utat! Mire gondolok? A kezdőoldalon jelenjen meg minden olyan információ, amivel a látogatót el tudjuk oda juttatni, ahol neki is és nekünk is jó. Ha vannak kiemelt funkcióink, mint a hírlevélre feliratkozás, az online rendelés, a szállásfoglalás, akkor azt tegyük a látogató orra elé, hadd lássa, és érje el akár 1-2 másodpercen belül. 

16. Ha van videó is az oldaladon, attól nem kell megkérdezned a felhasználót, hogy milyen sávszélessége van, és hogy milyen formában szeretné azt letölteni/megtekinteni. Real Player, 100K, Windows Media Player, Quicktime, WMV, 300K, AVI, Kábel, DSL, Modemes? NEM KELL, KÖSZI! Adj neki Flash videót. (Igen, flash. Erre pl. tökéletes :)) Számtalan videó megosztó van már a youtubetól kezdve a neten, ahová a legtöbb formátumú fájlt fel lehet tölteni, és azt meg tudja nézni bárki. 

17. Ha kis képeid vannak, amik lényegében linkek, akkor legalább valahová köré írd ki, hogy az hová visz. Ha a látogató csak akkor találja ki, hogy az egy link, ha felé viszi az egeret, akkor nem nagy az esélye, hogy azt gyorsan meg is találja. Csalódik egyet és megnyomja a VISSZA gombot. 

Talán most ennyi. Hirtelen felindulásból. :) Úgy összességében, ami engem legjobban idegesít, ha valaki úgy tervez és épít weboldalt, hogy meg akarja mutatni, mit tud, és beveti az összes létező technikát, amit csak ismer. Kezdve a flash, java, ajax alkalmazásoktól… Nem kell bizonyítanod minden áron. Csak akkor vesd be ezeket az eszközöket, ha az általa létrehozott vagy segített opció üzleti előnyt jelent. NEM MAGAMUTOGATÁS. Üzleti előny. Pont.

Ha lehet, akkor készíts egy rácsos hálót (Photoshopban igen egyszerűen ezek behúzgálhatók), és építsd ahhoz a többi elemet. Angolul tudóknak találtam néhány jó forrást a témában.

• Designing With Grid-Based Approach – itt nagyon jó példák vannak, illetve a folyamat is szemléltetve.
• Design By Grid – ők pedig egy egész weboldalt szántak a rácshoz épített dizájnnak.

Kövessük a sztenderdeket

Az emberek elvárnak dolgokat, és jó, ha nem mondunk nekik ellen. Legjobb példa: az aláhúzott szövegről mit gondolunk? Hogy az egy link. Ha nem link, akkor zavart okozhat. Nem követendő példa. Persze itt is vannak szabályok, amiket áthághatunk, de az oldal legnagyobb része csinálja azt, amit várnak tőle a látogatók!

Gondoljunk bele, mit fog csinálni a látogató

Mikor elkészítjük a dizájnt, készítsünk egy teszt oldalt, mielőtt belefognánk a nagy munkába. A kipróbálás során előjönnek azok az apróságok, amik egyébként igen sokat számítanak. Példa: ha olyan funkciónk van, ami nem azt csinálja, amit általában a hasonlóak szoktak, az akár a visszájára is fordulhat. Biztos nem kevesünknél fordult elő az is, hogy rutinszerűen rányomtunk az OK gombra, és csak utána fogtuk fel, hogy a kérdés az volt: “Biztosan ki akar lépni?”

A felhasználói funkciók fontossága

Mit fog csinálni a felhasználó, amikor az oldalunkra jön? Csináljunk erről egy listát, hogy mik lehetnek a lehetséges utak, amit végigjár, vagy éppen mi az, ami miatt ezen végigmegy. Ez a lista igen sokat fog segíteni nekünk, mert megadja a kezdőoldalunkra leginkább illő felhívásokat, pl. Vásárolj most!, Nézd meg hogyan készül! stb. És most itt legyen ott a fejekben: a webdizájn eszköz. A felhasználónak is. És ők nem szeretik, ha nem megy valami azonnal.

• csak átfutják a szöveget ahelyett, hogy elolvasnák,
• gyors döntéseket hoznak,
• türelmetlenek,

és ezekkel a technikákkal tökéletesen kímélik a szemüket.

Na így kell nekünk is gondolkodni, mikor elkészíthük a weboldalunkat! Kicsi rá az esély, hogy el fogják olvasni, amit oda írtunk. Főleg ha szép nagy, hosszú szövegről van szó. Na akkor elvesztünk. És elveszítettük az érdeklődőket is.

Arra kell építenünk, hogy átláthatóan szerkesszünk. Arra gondolok, hogy a kezdőlapon ne egy hosszú köszöntővel kezdjük, mert az egyébként sem érdekel senkit. Legy ez a figyelemfelhívás helye. Tegyünk ki sok linket, hogy továbbmehessen arra, ami érdekli. Emeljük ki vastag, nagy, esetleg színes betűvel azt, ami a lényeg (pl. címsorok, linkek, a szövegek esszenciája). És legyenek képek. Jól tagolják a szöveget, szépek, és ha jól választjuk ki a képeket, azok is adnak arculatot az oldalunknak.

Ha már fel kell tennünk egy hosszabb írást, azt mindenképpen tagoljuk. Legyenek a bekezdések között nagy terek, legalább 10px-esek. Az sem árt, ha a sorok magasságát is megnöveljük, ezzel szellősebbnek is tűnik. Szintén szúrjunk képeket sok betű közé, hogy ezzel még egy kicsit megtörjük a monotonitást, és fenntartsuk az érdeklődést.

Ha nagyon hosszúra írást helyezünk fel, akkor még egy pár cselre szükségünk lesz. Miért? Nem tudom ki nem ijed meg attól, ha a jobb oldalon a böngésző csúszkája hirtelen összezsugorodik fél centire… :) Én biztos. Maximum akkora a csúszka, mint a hüvelykujjunk (kb az oldal harmada). Így nem is kell 10 oldalra tennünk a tartalmat, de még kényelmesen görgethető fáradság nélkül.

Szóval:

• Csel #1. Bontsuk szét aloldalakra. A szöveg alatt (esetleg felett is) legyenek a további oldalak linkjei, a navigációs linkek.
• Csel #2. Nyomtatási lehetőség! Ha érdekli emberünket a tanulmány, vagy novella (vagy bármi), akkor azt el akarja olvasni tényleg, nem csak átfutni. Hadd nyomtassa ki, vigye haza, vagy be az ágyba. Tudjuk, a papír annyira nem utálja a szemet, mint a monitor.

Mik tehát a legfontosabb tényezők?

1. Könnyen megtalálja, amit keres. Hogy mit keres? Az igencsak függ attól, hogy milyen weblapról beszélünk, de az oldal céljának egyértelmű meghatározásával ez már könnyen megy.
2. Ezt legkönnyebben kiemeléssel tudjuk megtenni.
3. NEM KELL MINDENT kiemelni, mert az ugyanolyan rossz, mintha nem használnánk a kielelést, legyen egyensúlyban: “a kevesebb több”.
4. Figyeljünk a kontrasztra – hangsúlyos, de nem maximális kontraszt kell: kb 70-80%-os legyen színektől függően.
5. Tagoljuk a hosszabb szövegeket.

Kérdés valaki? :)

Forrás: Webdesign from Scratch