Vaheta logo ja paar sõna. Kui hästi sobiks sama avaleht siis mõnele täiesti teisele ettevõttele?
Korrektne paigutus ja töötavad nupud võivad jätta viimistletud mulje ka siis, kui leht räägib selle taga olevast ettevõttest väga vähe. Soov „moodne ja puhas veebileht” jätab enamiku disainiotsuseid lahtiseks.
Veebileht võib näida valmis enne, kui selle disainiotsused on läbi mõeldud.
Vaatame sama väljamõeldud rattatöökoja kahte versiooni ja seda, mida täpsem lähteülesanne muudab.
Sama väljamõeldud töökoda, samad teenused ja eesmärk: küsida remondiaega. Mõlemad kuvatõmmised on tehtud 1280 × 1000 piksli suuruses brauserivaates. Esimene versioon loodi lühikese lähteülesande järgi. Teisele anti täpsem disainisuund ja tulemust viimistleti. Mõlemad valmisid AI abiga.
Mis jääb sooviga „moodne ja puhas” lahtiseks?
Need sõnad võivad kirjeldada rattatöökoda, raamatupidamisfirmat, tarkvaratoodet või mööblipoodi. Need annavad mudelile aimu soovitud üldmuljest, kuid aitavad märksa vähem otsustada, mille poolest peaksid need veebilehed üksteisest erinema.
Kes lehele tuleb? Milline probleem ta sinna tõi? Mida peaks ta esimesena nägema? Millist päris materjali saab kujunduses kasutada?
Kui lähteülesanne jätab need küsimused lahtiseks, peab mudel lüngad ise täitma. Üks võimalik tulemus on tuttav ülesehitus: suur lubadus lehe alguses, illustratsioon, rida kaarte ja lõpus üleskutse tegutseda. Selline struktuur võib olla täiesti kasutatav. Kui seda korrata sisu lähemalt vaatamata, jääbki esialgne versioon selliseks, et ettevõtte nime võiks vabalt ära vahetada.
Anthropic on kirjeldanud oma mudeli loodud kasutajaliidestes korduvaid visuaalseid valikuid ja näidanud, kuidas täiendavad disainijuhised tulemust muudavad. See toetab mõtet, et juhistel on mõju. See ei ütle, kui sageli käituvad nii kõik mudelid või veebiehitajad.
Samuti ei saa värviülemineku või ümarate nurkadega kaardi järgi kindlalt öelda, kuidas veebileht valmis. Ka inimesed kasutavad malle. Kasulikum on küsida, kas tehtud valikud sobivad selle lehega.
Üks rattatöökoda, kaks versiooni
Näite aluseks on RADA, väljamõeldud rattatöökoda Tallinnas. See pakub kolme teenust: ratta aastahooldust, pidurite reguleerimist ja rehviparandust. Külastaja peaks saama leida sobiva teenuse ja küsida remondiaega.
Esimene lähteülesanne kirjeldas moodsat, puhast ja eri ekraanidele kohanduvat veebilehte. Teenused ja ajasoovi saatmine olid ette antud, kuid sihtrühm ja visuaalne suund jäid üsna vabaks. Täieliku lähteülesande ja mõlemad töötavad HTML-näited leiad allpool.
Proovi näiteid: esimene versioon · täpsema disainisuunaga versioon · algne lähteülesanne ja töö käik
Valminud leht on mõistlik algus. Sellel on ühtne roheline värvipalett, loetav tekst, selge nupp aja küsimiseks ja näite jaoks loodud jalgrattajoonistus. Teenuse lingil klõpsates valitakse sama teenus ka näidisvormis.
Pealkiri on „A better ride starts here.” ehk „Parem sõit algab siit.” Suurem osa avavaatest toetab seda sõbralikku sõnumit ja illustratsiooni. Täpsemad teenusekaardid asuvad lehel allpool.
See ei ole iseenesest halb valik. Ettevõttele, kes soovib mõjuda rahuliku ja julgustavana, võib selline suund sobida. Lihtsalt pole seda veel valitud ühe konkreetse külastaja vajadustest lähtudes.
Anna teisele versioonile konkreetne sihtrühm
Teise versiooni sihtrühm on igapäevane rattasõitja, kelle rattal on midagi viga ja kes ei pruugi teada probleemse detaili nime.
Peamine ülesanne on aidata tal leida sobiv teenus, kirjeldada muret ja küsida aega. Leht peaks mõjuma praktilise kohaliku töökojana. Visuaalseks lähtekohaks on paberile trükitud teenuste loend.
Sellest tulenevad mitu konkreetset muudatust:
| Otsus | Esimene versioon | Täpsema disainisuunaga versioon |
|---|---|---|
| Avapealkiri | „A better ride starts here.” ehk „Parem sõit algab siit.” | „Bicycle repair. Keep riding.” ehk „Rattaremont. Sõida edasi.” |
| Avavaate sisu | Sõbralik sissejuhatus ja suur illustreeritud stseen. | Sissejuhatus ja kõik kolm remondivalikut mahuvad jäädvustatud arvutivaatesse. |
| Teenuste nimetused | Aastahooldus, pidurite reguleerimine ja rehviparandus. | Esikohal on igapäevased mured: „A flat tyre” (tühi rehv), „Brakes that rub” (pidurid käivad vastu) ja „Time for a check-up” (aeg ülevaatuseks). Teenuse nimetus jääb selle alla. |
| Visuaalne iseloom | Salveirohelised taustad, ümarad plokid ja pehme maastikuvaade. | Paberitoonid, tumedad eraldusjooned, tugev tüpograafia ja kollane töökojagraafika. |
| Järjekord telefonis | Avaploki illustratsioon on enne teenuseid. | Teenused on enne illustratsiooni. |
Teises versioonis kasutatakse esimese jaoks loodud jalgrattajoonistust. Mõlemad lehed kasutavad süsteemifonte ja lehe sisse lisatud graafikat. Erinevus tekib sõnastuse, paigutuse, järjekorra ja olemasoleva materjali kujundusliku käsitluse muutmisest.
Lähemalt on näha kaks otsust: mida pealkiri ütleb ja milline sisu tuleb järgmisena. Igas paaris on sama piirkond 390 × 844 piksli suurusest telefonivaatest, samas mõõtkavas. Esimese versiooni teenusekaardid asuvad lehel allpool.
Teises versioonis on teenusevalikud lehe alguses rohkem esil. Valiku pealkiri algab probleemist „A flat tyre” ehk „tühi rehv” ning teenuse nimetus on selle all. Valik viib vormi juurde, kus rehviparandus on juba valitud. Eelvalik toimis ka esimeses versioonis; teises on see tee rohkem nähtaval.
See on disaininäide, mitte kasutatavusuuring. Näide näitab konkreetsete disainiotsuste tulemust. See ei tõesta, et teine versioon tooks rohkem broneeringuid või et jõuline kollane töökojakujundus sobiks igale ettevõttele. RADA on väljamõeldud ning mõlemad vormid kontrollivad sisestatud näidisandmeid ainult kohapeal brauseris.
Värv on ainult üks disainiotsus
Esimese lehe võiks muuta oranžiks ja jätta ülesehituse samaks. Värvipalett oleks uus, kuid külastaja kohtaks endiselt sama infot samas järjekorras.
Värv võib olla oluline osa ettevõtte näost. Samamoodi võivad seda olla tüpograafia, illustratsioonid, fotod, sõnakasutus ja liikumine. Kasulikum on küsida, mida iga valik juurde annab.
Selles näites ütleb suur remondipealkiri teenuse otse välja. Kolm nummerdatud rida annavad igale teenusele sama selge struktuuri. Illustratsioon kasutab töökoja teenustelehega sarnast visuaalset keelt. Need valikud täidavad enamat eesmärki kui lihtsalt tühja ruumi sisustamine.
Siin aitab ka visuaalne hierarhia: suurus, kontrast, vahekaugused ja paigutus mõjutavad seda, mis esimesena silma jääb. Nielsen Norman Group selgitab neid seoseid oma visuaalse disaini põhimõtetes.
Päris töökoja puhul võiks järgmise sammuna lisada fotod tegelikest ruumidest, selgituse teenuse sisu kohta, kinnitatud lahtiolekuajad ja õige aadressi. Need annaksid lehele rohkem sisu kui veel üks dekoratiivne sektsioon. See info peab tulema ettevõttelt; ilus paigutus seda ei asenda.
Hoia kasutamine tuttav ja arusaadav
Ka isikupärane disain võidab tavalistest, arusaadavatest nuppudest ja muudest juhtelementidest. Külastaja peaks lingi ära tundma, nupu tekstist aru saama ja teadma, millist välja ta täidab.
Nielsen Norman Groupi järjepidevuse ja standardite juhend selgitab, miks tuttavad kasutusvõtted aitavad uue kasutajaliidesega hakkama saada. Ühine komponenditeek saab neid toetada, samal ajal kui sisu ja visuaalne ilme on konkreetse ettevõtte omad.
Väikese teenuseveebi puhul panustaksin esmalt paigutusse, pildimaterjali ja sõnumisse, enne kui hakkaksin leiutama uut navigeerimisviisi. RADA teises versioonis piisab kahest nähtavast navigatsioonilingist. Ajasoovi vorm kasutab tuttavaid välju ja silte. Ettevõtte isikupära ei pea väljenduma juhtelemendis, mille kasutamist külastaja esmalt õppima peab.
Lähteülesanne, mida saad kohandada
Järgmine näidis võtab kokku teise versiooni disainisuuna ja sobib edaspidi kohandamiseks. Asenda näite üksikasjad oma tegeliku sihtrühma, sisu ja piirangutega.
Loo eri ekraanidele kohanduv veebileht RADA-le, väljamõeldud
rattatöökojale Tallinnas.
Sihtrühm
Igapäevased rattasõitjad, kes ei pruugi teada vea tehnilist nimetust.
Peamine ülesanne
Aita külastajal leida sobiv teenus, kirjeldada rattaga seotud muret
ja küsida remondiaega. Ajasoov ei tähenda kinnitatud broneeringut.
Olemasolev sisu
Ratta aastahooldus, pidurite reguleerimine ja rehviparandus.
Kasuta teenusenimede kõrval igapäevaseid probleemikirjeldusi.
Igalt teenuselt peab saama otse ajasoovi vormi juurde.
Disainisuund
Leht peab mõjuma praktilise kohaliku töökojana. Võta visuaalseks
eeskujuks paberile trükitud teenuste loend: paberitoonid, tumedad
eraldusjooned, tugev tüpograafia ja mõõdukas kollane aktsent.
Selgita enne koodi kirjutamist visuaalset hierarhiat.
Kasuta olemasolevat jalgrattajoonistust ning lisa vajalik graafika
lehefaili sisse.
Paigutus ja käitumine
Too remondivalikud lehe algusesse. Telefonis paiguta teenused
enne illustratsiooni. Hoia navigeerimine ja vormi kasutamine tuttav.
Lisa nähtavad väljasildid, klaviatuurifookuse tähistus ja arusaadav
tagasiside sisestusvigade kohta. Kui lisad liikumist, arvesta
kasutaja eelistusega animatsioone vähendada.
Piirangud
Ära mõtle välja hindu, arvustusi, aadresse ega vabade aegade infot.
Ütle selgelt, et tegu on väljamõeldud näitega. Vorm ei tohi
andmeid saata ega broneeringut luua.
Ülevaatus
Kuva lehte arvuti ja telefoni laiuses. Näita, mis ilmub esimesena,
proovi teenuselinke ning kontrolli vormi tühjade ja vigaste andmetega.
Selgita, millised otsused toetavad külastaja ülesannet ja millised
on stiilivalikud.Olemasoleva veebilehe puhul lisa ülesandesse selle päris komponendid, brändimaterjalid, kinnitatud tekstid ja tehnilised piirangud. Hea lähteülesanne aitab abilisel töötada sellega, mis on juba olemas.
Ülesande andmisele peaks järgnema tulemuse ülevaatus. Kui leht on brauseris nähtav, küsi konkreetselt: kas lehe alguse sõnum ütleb midagi sisulist? Kas kõrvaline sektsioon võtab põhiülesandelt ruumi? Kas info järjekord on mõistlik ka telefonis? Muuda neid valikuid, mille mõju saad valminud lehel näidata.
Kontrolli enamat kui kuvatõmmist
Mobiiliversioon on osa disainist. Selles näites jäävad remondivalikud rattajoonistusest ettepoole ja mõlemad navigatsioonilingid on nähtaval.
Sama versiooni kaks vaadet 390 piksli laiuses brauserivaates: lehe algus ja ajasoovi jaotis. Näide on teostatud HTML-is; vorm ei saada andmeid ega broneeri päriselt aega.
W3C ligipääsetava disaini juhend annab hea lähtekoha kontrasti, klaviatuurifookuse, väljasiltide, tagasiside ja eri ekraanilaiuste kontrollimiseks. Ilus kuvatõmmis arvutiekraanilt nendele küsimustele vastust ei anna.
Selle näite puhul kontrolliti mitmel ekraanilaiusel, kas sisu ulatub horisontaalselt vaatest välja. Katsetati teenusevalikut ja vormi põhilisi sisestuskontrolle ning vaadati, kas brauser teatab vigadest. Need kontrollid aitavad teostust hinnata, kuid ei tõesta täielikku vastavust ligipääsetavusnõuetele ega päris klientide eelistusi.
Enne disaini valmis kuulutamist näitaksin lehte ka kellelegi, kes sarnaneb selle kavandatud kasutajaga. Palu tal leida sobiv teenus ja alustada ajasoovi saatmist. Vaata, kus ta kõhkleb. Raskus õige valiku leidmisel annab rohkem kasulikku infot kui üldine kiitus värvide kohta.
Millised valikud sina jätaksid?
RADA puhul toob teine suund remondivalikud rohkem esile ja annab töökojale tugevama visuaalse iseloomu. Sulle võib siiski rohkem meeldida esimese versiooni pehmem toon. Selle üle tasub arutada, eriti kui oskad selgitada, millistele klientidele see paremini sobiks.
Kas valiksid kohaliku rattatöökoja jaoks esimese või teise versiooni? Mis sinu valiku määrab?
Tahad AI oma veebilehel tööle panna?
Mudeli valimine on vaid üks osa toimivast lahendusest. Kui sinu ettevõte vajab klienditoe assistenti, sisutöövoogu või ühendust olemasoleva süsteemiga, aitan kavandada ja ehitada vajaliku kasutajaliidese, liidestused ning kontrollid.
Vaata AI-liidestusi veebilehtedele ja rakendustele
Seotud tööd ja näited
Näidisprojekt: AI-klienditugi
Näide vestlusrobotist, mis vastab ettevõtte enda sisu põhjal ja on ühendatud olemasolevate süsteemidega.
