A Wikipedia új arca: egy szócikk újratervezése

Másnak is megmutatnád? Oszd meg!

Erik Kenedy UI kurzusán állandó feladat a Wikipedia egyik oldalának áttervezése. Mi a Tejút oldalának átgondolását, átdolgozását kaptuk feladatként. Hogyan változtattam meg az oldalt?

A feladatot két részre bontottam, amelyek azonban kapcsolódnak egymáshoz:

1. a Wikipedia felületének átdolgozása,
2. a konkrétan kapott oldal megjelenítésének megváltoztatása.

A második feladatrész nem független az elsőtől, hiszen a tartalmat az addigra már kidolgozott keretbe kell beilleszteni. Az egyes oldalak azonban jelentősen eltérhetnek egymástól jellemzőikben, és ezeket a felületnek mind átláthatóan meg kell tudnia jeleníteni. Ez a feladat annyiban egyszerű volt, hogy nem kellett különböző tartalmi jellemzőkkel készíteni oldalterveket, hanem konkrétan csak egy oldal megjelenésével kellett csak foglalkozni, és itt is csak desktop méretben.

A Wikipedia felhasználói felülete

A Wikipedia felülete sok menüpontot tartalmaz, amelyek nem kapcsolódnak szorosan az olvasott tartalomhoz, rengeteg ilyet találunk az oldalsávban, és még néhányat a felső, vízszintes sávban. Feltételezem, hogy a legtöbb látogató csak olvassa az oldalt, így sok olyan funkció van, amire nincs szükség, hogy mindenki folyamatosan elérje.

Az oldal színvilága fehér alapú, az oldalsáv, illetve a kapcsolódó szövegdobozok háttérszíne zöldes árnyalatú szürke. A linkek kékek.

Az átdolgozandó lap jellemzői

A The Milky Way (Tejútrendszer) szócikkre jellemző, hogy a szöveg hosszú, mind az egész cikk összességében, mind az egyes alcímek egyesével is. A sorok nagyon hosszúak, az elrendezés nagyon széles, ez a szükségesnél fárasztóbbá teszi az olvasást. Aki a teljes cikket végigolvassa, sokat kell görgetnie, az oldal nagyon hosszú. A második szintű alcímek kicsit kevesebb hangsúlyt kapnak (csak nagyobb betűméret, mint a szöveg), mint a harmadik szintűek (nagyobb betűméret, vastagabb megjelenés, mint a szöveg).

A tartalomjegyzék nagyon fontos, mert anélkül szinte lehetetlen lenne áttekinteni a cikk tartalmát, azonban nem elérhető folyamatosan olvasás közben, csak az oldal tetején. Újbóli áttekintéshez vissza kell hozzá görgetni.

Emellett sűrű a képi tartalom is. A képek különböző méretben, nem egységes igazítással jelennek meg az oldalon belül.

A szövegben sűrűn fordulnak elő hivatkozások más szócikkekre, illetve Wikipedián kívüli cikkekre. A hivatkozásokat tartalmazó szavak eltérő szövegszínnel jelennek meg, amelyek ilyen mennyiségben nehezítik a folyamatos olvasást.

A hosszú oldal közel felét foglalják el a hivatkozások, amelyeket azonban végig kell görgetni azért, hogy az oldal láblécét elérjük.

Az új Wikipedia oldal terve

A felhasználó felületet igyekeztem kontrasztosabbá tenni, hogy jobban látszódjon, mikor járunk az oldal tetején, és mikor érjük el az alját, a láblécet. Ehhez a linkekhez használt kék szín egy nagyon sötét, már szinte sötétszürke tónusát használtam

Végignéztem az összes menüpontot, pontosan mi mire való, és igyekeztem a cikket olvasó felhasználó számára azt a minimumot kiválasztani, ami hasznos, ha könnyedén elérhető. Az azonnal elérhető funkciók, amiket meghagytam:

• főoldalra mutató logó és a feliratot helyettesítő W karakter
• kapcsolódó médiaelemek (képek, videók)
• nyelvválasztó
• keresés az oldalon
• belépés
• láblécben elérhető linkek (pl. licenc, utolsó módosítás dátuma, Jogi nyilatkozat, Sütinyilatkozat stb.)

A többi menüpontot vagy belépéshez kötném, vagy a főoldalon keresztül tenném elérhetővé, ott összegyűjtve.

Mivel a Wikipedia egy már szinte mindenki által ismert „intézmény”, a nevét és a logóját mindenki ismeri. A logo megjelenését sokkal izgalmasabbá tehettem azzal, hogy nem látszik az egész, a Wikipedia név helyett pedig csak egy W karakter szerepel. Mindkettő a főoldalra mutató linket tartalmaz.

Talán a legnagyobb változtatás, hogy a szócikk tartalomjegyzékét folyamatosan láthatóvá tettem egy bal oldali oldalsávban. Mivel egyszerre csak egy címnyi vagy alcímnyi tartalmat jelenítek meg, így az oldal hossza kezelhető marad. Az oldalsávok gondoskodnak arról is, hogy desktop méretben a sorok lerövidüljenek az eredeti megjelenéshez képest, és így sokkal olvashatóbbá váljon a szöveg.

A tartalomjegyzék számozását a szöveg címsorainak számozásában is alkalmaznám, így a megjelenített szöveg jobban tagolódna.

A linkek kékre színezése helyett vékony kék aláhúzást alkalmaztam, hogy ne legyen akkora kontraszt a szöveg színezésében.

Megváltoztattam az oldalon használt betűtípusokat is. Minden címet sans-serif típusra cseréltem, azonban figyelembe vettem, hogy nagyobb méretben, címként más típus mutat jól, mint folyószövegként.

A képek megjelenítését függetlenné tettem a szövegtől, csak hivatkozásokat hagytam, hogy egy felugró ablakban megjeleníthető legyen a kapcsolódó kép. A képek ezenkívül címenként, alcímenként csoportosítva megtekinthetők az oldal tetején található Related media menüpontban is.

Azért, hogy ne tisztán szöveges oldal jelenjen meg, egy, a szócikkre nagyon jellemző képet az oldal jobb felső sarkában hagytam. Nem a szokásos téglalap alakú kivágást alkalmaztam, a ferde kivágás a címsort dinamizálja.

Van egy jó weboldalad, ahol nagyon sok időt, energiát áldoztál a tartalomra, de a megjelenése felett eljárt az idő vagy sosem volt igazán felhasználóbarát? Fordulj hozzánk, szívesen foglalkozunk kihívást jelentő feladatokkal.

—
A cikkben felhasznált kép bemutatóoldal nélküli verziójának képe innen származik: PSDFreebies.

Másnak is megmutatnád? Oszd meg!