Üzenet dobozok formázása CSS-el
Szerző: Gergő | CSS | 2009 november 2. 12:12

2 nov 1

Amikor a felhasználó által bevitt adatokat validáljuk, fel kell hívnunk a figyelmét az esetleges hibákra. Legtöbben egyszerűen kiiratják, mások piros színnel emelik ki a problémás részeket, de itt vége a formázásnak. Én azt mondom, ne csak a hibákat emeljük ki, és ne csak a betű színét változtassuk meg. Mit jelezzünk a felhasználónak a hibákon kívül? Én négy részre szoktam osztani az üzeneteket: információ, sikeres művelet, figyelmeztetés és hiba. Mindegyik üzenet más színű betűvel, más dobozban, egy-egy ikonnal van ellátva.

Lássuk őket.

Informácós üzenet

Ennek a típusnak a feladata, hogy informálja a felhasználót valami releváns, az adott szakaszhoz kapcsolódó dologról. A színe kék, mivel az emberek ezt a színt kötik az információhoz.

Információs doboz

Ide tippeket, hasznos információkat, vagy tanácsokat szoktam írni.

Sikeres művelet

Ezt akkor jelenítsük meg, ha a felhasználó valamilyen akciót sikeresen vitt véghez. Fontos elkülöníteni ezt az információs dobozhoz, mert így a felhasználó a zöld színt és magát a dobozt jobban köti a sikerhez. Ez később még jól jöhet, mert a figyelmét garantáltan megragadjuk vele, és fel lehet használni arra, hogy a benne írt információhoz pozitívan álljon hozzá, legyen az bármi.

Figyelmeztetés

Ilyen üzenetet akkor jelenítünk meg, ha egy folyamat teljesen nem mehetett végbe, pl: “A regisztrációd sikeres volt, azonban a visszaigazoló e-mail-t nem tudtuk elküldenia megadott címre.” vagy “Amíg nem töltöd ki teljesen a profilod, nem fogsz tudni keresni a felhasználók között.”

Hiba

Hiba üzenetet küldünk, ha egy folyamatot egyáltalán nem tudtunk végrehajtani, pl: “A profilodat nem tudtuk menteni.”

HTML

<div class="info">Info message</div>
<div class="success">Successful operation message</div>
<div class="warning">Warning message</div>
<div class="error">Error message</div>

CSS

body{
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
}
.info, .success, .warning, .error, .validation {
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
}
.info {
color: #00529B;
background-color: #BDE5F8;
background-image: url('info.png');
}
.success {
color: #4F8A10;
background-color: #DFF2BF;
background-image:url('success.png');
}
.warning {
color: #9F6000;
background-color: #FEEFB3;
background-image: url('warning.png');
}
.error {
color: #D8000C;
background-color: #FFBABA;
background-image: url('error.png');
}

Összegzés

A jól formázott üzenetek nagyon fontosak a felhasználói élmény szempontjából, használjuk hát bátran. Ikonokat a dobozokhoz az iconfinder.net oldalról szoktam leszedni, nézzetek be oda is, nagyon hasznos forrás.

Oszd meg, és uralkodj: