Txhim kho UX lub website raws li haujlwm neeg siv

Website zoo nkauj tsis tau txhais hais tias siv tau yooj yim. Yog tus tuaj saib tseem tsis paub yuav nias qhov twg, yuav sau foos li cas lossis tos ntev dhau thiaj pom cov ntsiab lus tseem ceeb, qhov teeb meem yog nyob rau hauv user experience (UX), tsis yog xim thiab layout xwb.

Txoj kev nyab xeeb los pib yog xaiv ib txoj hauj lwm meejxws li nrhiav nqi, xa foos lossis rub ntaub ntawv. Sau tseg qhov chaw uas tus siv qeeb, tsis meej pem lossis tso tseg; kho qhov laj thawj uas cuam tshuam ntau tshaj; tom qab ntawd siv tib txoj hauj lwm rov kuaj dua. Txoj txheej txheem no siv tau rau website uas twb qhib siv lawm thiab rau prototype, tab sis tsis hloov chaw rau user research hauv cov project uas muaj kev xav tau tshwj xeeb.

Ua ntej pib: npaj thaj tsam, kev nkag mus thiab txoj kev rov qab

Koj tsis tas yuav kho source code tam sim ntawd. Ua ntej, txheeb xyuas nplooj ntawv lossis flow uas yuav tshuaj xyuas thiab npaj tej yam no:

Kev nkag mus: URL ntawm environment uas yuav tshuaj xyuas, test account thiab kev tso cai kho yog koj yog tus muab website tso siv.
Txoj hauj lwm tseem ceeb: ib txoj hauj lwm uas muaj nqis meej thiab muaj cov xwm txheej qhia tau tias txoj hauj lwm tiav lawm.
Ntaus ntawv thiab browser: tsawg kawg yog ib qho screen dav, ib qho screen nqaim thiab browser uas cov neeg siv phiaj xwm nquag siv.
Cuab yeej ntsuas: cuab yeej tshuaj xyuas performance, cuab yeej sau tseg yuam kev thiab ib daim ntawv taug qab cov txiaj ntsig. Yog sau cov ntaub ntawv los ntawm cov neeg siv tiag, yuav tsum ua raws txoj cai ntiag tug thiab cov cai uas siv rau website.
จุด rov qab: khaws ib daim qauv ntawm cov ntsiab lus, source code lossis configuration ua ntej hloov; rau website uas tab tom khiav, sim hloov hauv test environment ua ntej tso tawm.

Yog tseem tsis muaj ntaub ntawv, pib los ntawm koj tus kheej ua txoj hauj lwm ib zaug thiab thov tsawg kawg ib tug neeg uas tsis tau koom tsim website sim dua. Qhov no yog kev tshuaj xyuas thawj zaug, tsis yog pov thawj sawv cev rau txhua tus neeg siv.

1. Txheeb xyuas txoj hauj lwm uas yuav txhim kho ua ntej kho interface

Ib lub website yuav muaj ntau pua nplooj ntawv, tab sis cov neeg siv feem ntau nkag los ua ob peb txoj hauj lwm meej xwb. Yog tseem tsis tau txheeb xyuas txoj hauj lwm, koj yuav yooj yim txhim kho raws li pab pawg xav xwb, tsis yog raws li qhov xav tau tiag.

Sau txhua txoj hauj lwm ua plaub ntu:

Leej twg: tus siv tshiab, tus qhua qub, tus yuav khoom lossis tus xav tau kev pab;
Xav ua dab tsi: nrhiav nqi, sib piv khoom, xa lus thov lossis rub ntaub ntawv;
Qhov xwm txheej qhia tias tiav: tus siv tau txais qhov txiaj ntsig meej yam tsis tas muaj neeg qhia;
Qhov uas yuav ua tsis tiav: nrhiav tsis pom khawm, tsis nkag siab lo lus tshwj xeeb, ntsib lus yuam kev tsis meej lossis yuav tsum tos ntev dhau.

Piv txwv xav txog: txoj hauj lwm ntawm nplooj ntawv tiv tauj yog “tus qhua tshiab xa tau nws lo lus nug thiab paub tias yuav tau txais lus teb thaum twg”. Yog li, muaj ib lub khawm “Xa” xwb tseem tsis txaus. Nplooj ntawv tseem yuav tsum muaj lub hom phiaj tiv tauj uas nkag siab yooj yim, cov teb sau uas tsim nyog xwb, cov npe teb uas meej, cov lus yuam kev qhia meej thiab ib qho confirmation status tom qab xa.

2. Sau tseg qhov xwm txheej tam sim no siv ntaub ntawv thiab kev soj ntsuam

Tsis muaj ib qho metric twg uas piav tau UX tag nrho. Kev ntsuas hauv ib puag ncig tswj tau pab nrhiav technical errors; cov ntaub ntawv los ntawm cov neeg siv tiag qhia tias teeb meem tshwm sim li cas hauv ntau yam ntaus ntawv, network thiab tus cwj pwm; hos usability testing qhia tias cov neeg siv nkag siab thiab siv li cas.

Txoj hauj lwm	Yam qhia tias muaj teeb meem	Txoj kev tshuaj xyuas	Qib tseem ceeb thaum pib
Xa daim foos tiv tauj	Muaj ntau lub teb tsis tau sau lossis cov lus yuam kev dav dav dhau	Sim cov ntaub ntawv raug, tsis sau ntaub ntawv thiab sau tsis raws hom ntawv	Siab
Nrhiav ntaub ntawv nqi	Yuav tsum qhib ntau nplooj ntawv lossis rov qab mus ntau zaus	Sau tseg txoj kev mus thiab sim siv qhov kev tshawb nrhiav hauv website	Siab
Nyeem tsab xov xwm hauv xov tooj	Ntawv me, khawm nyob sib ze dhau los sis yuav tsum rub kab rov tav	Kuaj ntawm lub vijtsam nqaim los ntawm kev kov	Nruab nrab los sis siab
Qhib nplooj khoom	Cov ntsiab lus tseem ceeb tshwm qeeb los sis qhov layout dhia	Ntsuas kev ua tau zoo thiab muab piv rau cov ntaub ntawv los ntawm cov neeg siv tiag	Siab

Koj kuj yuav saib tau txheej txheem ntsuas website qhov kev ua tau zoo rau cov neeg tshiab thaum yuav teeb tsa qhov kev ntsuas thawj zaug. Thaum txheeb xyuas, cais “tus neeg siv nrhiav tsis tau” ntawm “tus neeg siv nrhiav tau lawm tiam sis nplooj teb qeeb”; ob qhov teeb meem no yuav tsum siv txoj kev kho txawv.

3. Ua kom cov ntsiab lus, qauv thiab kev taw qhia meej

Qhia tus neeg siv tias nplooj no pab lawv ua dab tsi

Lub npe tseem ceeb yuav tsum piav txog qhov txiaj ntsig los sis cov ntsiab lus uas tus neeg siv tab tom nrhiav, tsis yog tsuas sau lub npe sab hauv ntawm qhov khoom xwb. Nqe lus qhib yuav tsum teb sai rau peb lo lus nug: nplooj no muab dab tsi, yog rau leej twg thiab kauj ruam tom ntej yog dab tsi.

Piv txwv, “Enterprise solutions” yog ib lub npe dav thiab tsis pab taw qhia meej. “Appointment-management software for small clinics” qhia tus nyeem paub ntau dua txog pab pawg neeg siv thiab lub hom phiaj.

Txo cov kev xaiv uas sib tw kom tau kev mloog

Hauv txhua lub vijtsam, xaiv ib qho kev ua tseem ceeb. Tej kev ua pab tseem muaj tau, tiam sis tsis tsim nyog kom muaj qhov tseem ceeb sib npaug yog tias lawv coj mus rau cov txiaj ntsig sib txawv.

Hloov chaw siv ntau lub npe xws li “Kawm ntxiv”, “Saib tam sim no” thiab “Tshawb nrhiav”, cia li piav qhov txiaj ntsig kom meej: “Saib tus nqi”, “Rub daim ntawv qhia siv” los sis “Xa daim ntawv thov kev sab laj”. Lub npe qhia meej pab tus neeg siv kwv yees tau tias yuav muaj dab tsi tshwm tom qab nias. Txawm li cas los xij, tsis yog txhua qhov txuas yuav tsum hloov ua ib lub khawm loj.

Teem kev taw qhia raws li tus neeg siv nrhiav cov ntaub ntawv

Pab pawg cov nplooj raws li cov ncauj lus los sis cov haujlwm uas paub zoo, tsis yog raws li qauv faib chaw haujlwm. Tus neeg uas xav “hloov service package” tsis tas yuav paub tias qhov haujlwm ntawd nyob hauv “Kev muag khoom” los sis “Kev saib xyuas neeg siv khoom”.

Kuaj sai los ntawm kev thov ib tug neeg uas tsis tau koom tsim website teb tias: “Koj yuav nias qhov twg thiaj ua tiav txoj haujlwm no?”. Yog lawv yuav tsum twv ntau zaus, qhov teeb meem tej zaum nyob ntawm tus qauv los sis cov npe ntawm kev taw qhia, tsis tas yuav yog xim.

4. Ua kom cov form sau tau yooj yim thiab kho tau thaum yuam kev

Thov tsuas yog cov ntaub ntawv uas xav tau rau kauj ruam tam sim no. Txhua lub teb yuav tsum muaj label meej; tsis txhob siv tsuas yog cov ntawv qhia hauv lub npov sau xwb. Lub element <label> pab txuas label rau lub teb sau thiab txhawb cov neeg siv assistive technology (raws li developer.mozilla.org).

<form action="/contact" method="post">
  <label for="email">Email để nhận phản hồi</label>
  <input
    id="email"
    name="email"
    type="email"
    autocomplete="email"
    aria-describedby="email-help"
    required
  >
  <p id="email-help">Chúng tôi dùng địa chỉ này để trả lời câu hỏi của bạn.</p>
  <button type="submit">Gửi câu hỏi</button>
</form>

Ua qhov no rau qhov twg: muab cov code tso rau hauv qhov chaw sim ntawm nplooj form, thiab hloov /contact nws kom yog qhov chaw nyob tiag uas koj siv los ua form processing. Code no tsuas tsim HTML structure xwb; server tseem yuav tsum ua validation, tiv thaiv kev xa automation, khaws cia thiab xa lus teb kom nyab xeeb.

Qhov yuav tsum tshwm sim: thaum nias lub label, focus yuav mus rau hauv email field; browser yuav paub tias yog email field; tus neeg siv yuav paub tias vim li cas thiaj yuav tsum sau cov ntaub ntawv. Sim xa form thaum tso tseg tsis sau los sis sau tsis raws hom ntawv. Yog browser tsis qhia qhov yuam kev kom tsim nyog, rov kuaj type, required, label thiab qhov kev ua haujlwm ntawm server.

Tus nqi autocomplete kom haum yuav pab browser sau cov ntaub ntawv uas twb khaws tseg, txo cov ntaub ntawv uas yuav tsum ntaus manually (raws li developer.mozilla.org). Siv tus nqi uas raug rau hom ntaub ntawv xwb; tsis txhob muab label yuam kev kom yuam browser sau lwm hom nqi.

Lus ceeb toom txog kev yuam kev yuav tsum teb peb lo lus nug: yuam kev nyob qhov twg, vim li cas thiaj tshwm sim thiab yuav kho li cas. “Cov ntaub ntawv tsis raug” tsis muaj txiaj ntsig npaum li “Sau email raws hom ntawv ten@example.com”. Thaum form qhia yuam kev, tsis txhob muab cov ntaub ntawv uas raug tshem tawm; thiab tom qab xa tiav yuav tsum qhia meej tias tam sim no nyob rau theem twg.

5. Kuaj keyboard, vijtsam nqaim thiab assistive technology

Responsive tsuas yog lub hauv paus xwb. Ib nplooj yuav yoog raws qhov loj ntawm vijtsam tau, tiam sis tseem siv nyuaj yog tias cov khawm nyob sib ze dhau, dialog tsis txais keyboard focus los sis tus neeg siv yuav tsum rub kab rov tav thiaj nyeem tau.

Siv Tab Tab mus hla txhua qhov txuas, khawm thiab teb sau; qhov kev raws ntawm focus yuav tsum tsim nyog.
Kuaj Enter Enter, spacebar thiab cov xub ntawm cov element uas tsim nyog; tsis txhob siv nas xwb.
Nthuav ntawv kom loj txog 200% thiab kuaj cov ntsiab lus, kev ua haujlwm, focus thiab kev scroll.
Kuaj contrast, focus state, alt text rau cov duab uas muaj lub ntsiab lus thiab cov lus ceeb toom txog kev yuam kev.
Ntawm vijtsam nqaim, kuaj menu, data table, popup window, touch area thiab virtual keyboard.

WCAG 2.2 muab cov qauv ntsuas txog keyboard, contrast, kev hloov qhov loj ntawm ntawv thiab qhov loj ntawm thaj chaw rau cursor interaction (raws li w3.org). Qhov no yog technical standard rau coj kev ntsuam xyuas xwb; tsis yog pov thawj tias website twb ua tau raws txhua yam kev xav tau ntawm cov neeg muaj disability.

Yog website twb responsive lawm tiam sis tseem siv nyuaj hauv xov tooj, kuaj raws txhua txoj haujlwm, tsis yog saib daim screenshot ntawm interface xwb. Koj kuj yuav saib ntxiv txog cov laj thawj uas ua rau responsive website tseem siv nyuaj kom nthuav qhov kev txheeb xyuas ntxiv.

6. Txhim kho kev ua tau zoo raws li yam uas tus neeg siv hnov tau

“Nplooj twb load tiav lawm” tsis txhais tias “nplooj twb siv tau lawm”. Tus neeg siv saib xyuas tias cov ntsiab lus tseem ceeb tshwm thaum twg, lub khawm teb li cas thiab layout puas dhia thaum lawv tab tom nyeem.

Peb qhov ntsuas Core Web Vitals taug qab peb yam sib txawv: LCP qhia txog qhov ceev uas cov ntsiab lus tseem ceeb tshwm rau pom, INP qhia txog qhov website teb rov qab sai npaum li cas thaum muaj kev cuam tshuam thiab CLS qhia txog qhov kev teeb tsa pom tau ruaj khov npaum li cas thaum layout hloov (raws li web.dev).

LCP tsis zoo: xyuas lub server, cov resource uas thaiv kev tso tawm, cov duab loj thiab qhov uas cov ntsiab lus tseem ceeb raug thauj qeeb dhau.
INP tsis zoo: nrhiav cov JavaScript task uas siv sijhawm ntev, kev lis event uas hnyav lossis qhov interface hloov ntau dhau tom qab txhua zaus nyem.
CLS tsis zoo: teem qhov loj me tseg rau cov duab, tshaj tawm thiab cov ntsiab lus uas thauj ntxiv kom layout tsis txhob thawb cov ntawv lossis khawm mus rau lwm qhov.

Tsis txhob cia siab rau Lighthouse khiav ib zaug xwb. Kev sim hauv ib puag ncig tswj tau pab rov tsim qhov teeb meem, hos cov ntaub ntawv los ntawm cov neeg siv tiag qhia txog qhov sib txawv ntawm cov cuab yeej, network thiab tus cwj pwm; ob hom kev ntsuas no yuav tsum siv los txhawb ib leeg (raws li web.dev). Tom qab txhua qhov hloov pauv, sau tseg nplooj ntawv, cuab yeej, tej yam kev mob thaum ntsuas thiab qhov tshwm sim kom thiaj sib piv tau muaj txiaj ntsig.

7. Sim los ntawm ib txoj hauj lwm meej

Lo lus nug “Koj xav li cas txog lub website?” feem ntau ua rau tau lus taw qhia dav dav uas nyuaj coj los siv. Muab ib txoj hauj lwm uas muaj qhov pib thiab yam uas suav tias ua tiav meej:

“Koj tab tom nrhiav ib pob kev pabcuam uas haum rau ib pab neeg muaj tsib tug. Nrhiav tus nqi thiab qhia tias koj yuav xaiv pob twg.”
“Siv daim foos tiv tauj xa ib lo lus nug txog lub sijhawm xa khoom.”
“Nrhiav cov ntaub ntawv qhia kev teeb tsa thiab qhib qhov version uas raug rau tus pib.”

Thaum soj ntsuam, sau tseg:

tus neeg siv nres rau qhov twg lossis rov qab mus rau kauj ruam dhau los;
lawv nyeem, nyem thiab sau ntaub ntawv raws li ib theem zuj zus twg;
lawv siv lo lus twg los piav lawv lub hom phiaj;
lawv puas ua tiav yam tsis tas muaj tus coj qhia;
qhov yuam kev twg rov tshwm rau ntau tus neeg lossis ntau yam cuab yeej.

Kev sim kev siv tau uas muaj tus coj yuav kom cov neeg koom ua ib txoj hauj lwm meej, thaum tus kws tshawb fawb soj ntsuam lawv txoj kev xav thiab kev ua. GOV.UK daim qauv qhia kuj piav txog kev muab kev tshawb fawb cov neeg siv thiab cov ntsuas kev ua tau zoo los ua ke thaum ntsuas kev siv tau (raws li gov.uk). Tsis txhob qhia txhua qhov kev nyem; lub hom phiaj yog saib seb interface puas piav qhia nws tus kheej tau zoo npaum li cas.

8. Tus txheej txheem yam tsawg kawg los optimize ib nplooj ntawv

Xaiv ib txoj hauj lwm: sau kom meej tias tus neeg siv pib qhov twg thiab yuav suav tias ua tiav li cas.
Sau tseg txoj kev uas siv tam sim no: tus naj npawb kauj ruam, sijhawm tos, qhov yuam kev thiab tej chaw uas tus neeg siv yuav tsum twv.
Xyuas cov ntsiab lus thiab interface: npe nplooj ntawv, cov label ntawm khawm, kev taw qhia, daim foos, xwm txheej yuam kev thiab kev siv tau los ntawm keyboard.
Ntsuas kev ua tau zoo: xyuas LCP, INP, CLS nrog rau cov resource lossis JavaScript yuam kev uas cuam tshuam; sau tseg tej yam kev mob thaum ntsuas.
Kho ib pab laj thawj uas cuam tshuam ua ke: yog xav paub tias yam twg ua rau muaj qhov txawv, tsis txhob hloov ntau yam tib lub sijhawm.
Sim dua los ntawm tib txoj hauj lwm: siv tib yam kev ntsuas los sib piv ua ntej thiab tom qab hloov.
Tso tawm raws li kev tswj hwm: siv ib puag ncig sim lossis tso tawm ua ntu zus yog lub system txhawb.
Saib xyuas thiab rov qab kho thaum tsim nyog: yog txoj hauj lwm tseem ceeb puas lawm lossis muaj qhov yuam kev tshiab tshwm, muab qhov hloov tua lossis rov qab siv version uas ruaj khov, ces sim dua los ntawm daim qauv qub.

Yog sijhawm tsawg, muab qhov tseem ceeb rau cov hauj lwm uas ua tsis tiav, teeb meem ntawm daim foos lossis kev them nyiaj, teeb meem ntawm xov tooj, teeb meem keyboard thiab assistive technology; kev kho kom zoo nkauj yuav tsum ua tom qab cov teeb meem thaiv no.

9. Cov kev ua yuam kev uas nquag pom thaum optimize UX

Hloov interface yam tsis tau txheeb xyuas qhov teeb meem: tus qauv tshiab yuav zoo nkauj dua, tabsis tsis pab tus neeg siv nrhiav tau cov ntaub ntawv.
Tsuas sim ntawm pab neeg tsim kho lub computer xwb: cov cuab yeej, browser, network thiab txoj kev input sib txawv yuav ua rau muaj kev siv sib txawv.
Siv xim ua tib qho cim qhia xwb: xwm txheej yuam kev lossis ua tiav yuav tsum muaj ntawv, cim duab lossis qauv tsim uas haum ntxiv.
Siv placeholder hloov label: cov lus qhia yuav ploj thaum tus neeg siv pib sau, ua rau lawv tsis nco qab tias daim teb ntawd thov dab tsi.
Nrhiav ib qho performance score uas zoo tshaj txhua yam: score tsuas yog ib qho cim pab kuaj xyuas xwb; nws tsis hloov tau qhov uas tus neeg siv ua tiav txoj hauj lwm.
Qhia lub qhov rais pop-up ntxov dhau: yog tias nws npog cov ntsiab lus lossis thaiv qhov kev ua tseem ceeb, nws yuav tsim ib qho teeb meem ntxiv.
Tso cov lus nug coj kev: cov lus nug xws li “Lub pob no puas pom yooj yim?” yuav ua rau tus neeg koom teb raws li tus nug xav kom teb.

Daim ntawv txheeb xyuas ua ntej tso tawm

Puas tau sau meej tias txoj haujlwm tseem ceeb yog dab tsi thiab yuav suav tias ua tiav thaum twg?
Lub npe, ntu qhib thiab lub pob tseem ceeb puas coj mus rau tib lub hom phiaj?
Tom qab txhua lub xeev, tus neeg siv puas paub tias kauj ruam tom ntej yog dab tsi?
Daim ntawv puas muaj label, lus qhia, autocomplete uas tsim nyog, thiab puas kho tau thaum muaj yuam kev?
Puas ua tiav tau txoj haujlwm siv keyboard?
Puas siv tau nplooj ntawv ntawm lub vijtsam nqaim thiab thaum nthuav ntawv kom loj?
Duab, cov ntsiab lus uas thauj ntxiv thiab kev tshaj tawm puas ua rau qhov kev teeb tsa dhia lossis hloov chaw?
Puas tau kuaj ob qho tib si hauv ib puag ncig tswj tau thiab hauv cov xwm txheej uas cov neeg siv tiag tiag ntsib?
Puas muaj tsawg kawg ib tus neeg uas tsis tau koom tsim lub website sim txoj haujlwm ntawd lawm?
Puas tau khaws daim qauv ua ntej hloov, sau cov txiaj ntsig, thiab txiav txim siab tias yuav thim rov qab li cas?

Kev optimize UX tsis yog hloov ib zaug xwb ces xaus. Lub voj voog uas ntseeg tau dua yog xaiv ib txoj haujlwm, soj ntsuam qhov chaw uas tus neeg siv raug khuam, kho lub hauv paus teeb meem, kuaj dua thiab taug qab tom qab tso tawm. Yog ua li ntawd, kev txiav txim siab txog kev tsim qauv yuav yog raws li tus neeg siv puas ua tiav nws lub hom phiaj, tsis yog tsuas yog raws li qhov kev xav tias lub interface “zoo nkauj dua” lawm.

Cov ntaub ntawv siv

Web Content Accessibility Guidelines (WCAG) 2.2 — W3C.
How to structure a web form — MDN Web Docs.
autocomplete HTML attribute — MDN Web Docs.
How the Core Web Vitals metrics thresholds were defined — web.dev.
User-centric performance metrics — web.dev.
Using moderated usability testing — GOV.UK Service Manual.

Txhim kho UX lub website: Los ntawm haujlwm neeg siv mus rau qhov ntsuas tau