Become a GUI Designer with Proper Usability and Testing
1. I want to be a GUI designer
SNS Gamer usability and mission of the designers
Presenter: Nguyễn Xuân Phú- 2D art team leader of GSS
GUI: graphical user interface
3. Common usabilities
GUI have to be self-evident, which means
gamers can get it on sight.
When GUI can’t be self-evident, let’s make
it easy to understand.(explanatory)
4. Don’t make them think
They’re always impatient
Common usabilities
5. Don’t make them think!
– Icon Identification
– 5 fingers
Common usabilities
12. They’re always impatient.
– They don’t read, they CLICK
Common usabilities
13. What we think: let’s write some
great literature or at least as
much as better
They’re always impatient
What a gamer thinks: across the
field with a race car and stop
where we find interesting
They don’t read, they click
Chàomừngquívịvàcácbạn, rấtvuikhicácbạnthamdựbuổitrìnhbàycủatôivềchủđềgiaodiện game SNSTạisaotôiđặttựabàiphátbiểunàynhưvầy… UI hiệnvẫnchưađượcxemtrọngvàlàthànhphầnthứyếutrongthiếtkếđồhọa game, vớibài present củatôi, tôimuốnchocácbạnthấynhữngđiềulýthúkhithiếtkếgiaodiệncho game, đểtừđócácbạnthấyđólà 1 đammêđángđểtheođuổi.TôilàPhú, hiệnđangphụtráchmảng 2D art của GSS. Vàtôicónhữngđiềusẽ chia sẻnhưsau.
Hành vi thôngdụngcủa gamerXuhướng UI.Thử hay làtranhluậnvề UINội dung chỉngắngọnvậythôi, vàtôisẽchủyếunóivềnhữngtrảinghiệmbảnthântrongquátrìnhlàmvềnghiêncứuvề UI củamình.Chúng ta hãycùngbắtđầu…
Đầutiênchotôihỏi, cóbạnnàođãđọccuốn Don’t make me think củatácgiảstevekrugrồi… Chắccácbạncũngrútrađượcnhiềuđiềuchomình…Riêngtôi, tôicóthểtómgọnthành 2 điềutâmniệmkhithiếtkế UI, chắcsẽcónhiềubạnđồngtình. Vàsởdĩcó 2 điềulưu ý đóchínhlàxuấtpháttừtâmlýphổthôngcủa gamer… Vìvậyđâylàyêucầutiênquyếtchosựthànhcôngcủa UI, hơnnhiều so vớiyếutốmỹthuật.Vậyhành vi thôngthườngcủa gamer làgì
Đólà: Đừngđểhọphảiđauđầu.Và… họkhôngphảilàngườikiênnhẫnNghecóvẻnhưnhữngngườichơi game toànlàthứlườibiếng. Nhưngsựthật, nếu UI làmkhóhọ ở 2 điểmtrên, họsẽchẳngtàinàođihếthoặctậnhưởngtrọnvẹnnội dung của game cả. Vìvậyđólàmộtnhucầuchínhđáng…Chúng ta sẽđivàotừnghành vi một
Cónhiềuđiềucầnlưu ý đểlàmcho 1 UI khôngkhiếnngười ta đauđầu, vídụnhưtínhcôđọngcủatừngữ, sửdụngcácdạng UI chuẩn, sửdủng tooltip v..v.. NhữngđiềuđócóthểcácbạnđãbiếthếtCho nên ở đâytôichỉsẽnóivề 2 kinhnghiệmtựbảnthântôirútravàchorằngrấtcóích.Thứnhất: Nhậndiện IconThứ 2: Nguyêntắcbàntaynămngón.Chúng ta cùngđinào.
Nhậndiện icon làgì…Chúng ta cóxuhướnggộpchungnhữngsựvậthiệntượngtươngđồngnhauthành 1 nhóm… Vàtrongtrườnghợpsửdụng UI, cáimà gamer thườnggomlạinhấtchínhlà icon của game, nhữngthànhphầncóthểtươngtácđược. Khi gamer khôngcócơsởđểphânnhóm icon, họsẽdễdàngbịbốirối.2 giaodiện game chochúng ta 2 vídụvềđiềunày…. Đâylà 2 sảnphẩmcủa 2 studio thuộc VNG… Bêntaytrái, HàngRongvớichấtlượngđồhọarấttốt, tuynhiêngiaodiệncủanólà 1 câuchuyệnkhác. Hãynhìnlênhàng icon phíatrênsựkhácbiệtrõrệtcủanútbấm ô thoạilàmchotoànbộdãy icon trởnênhỗnloạn, việckosửdụng tooltip làmcho icon cònkhóhiểuhơn.Tìnhhìnhtươngtựtuycóphầnđỡhơn ở game my fish…
Vậychúng ta cónênlàmcho gamer dễthởkhông, tấtnhiênlànênrồi… Vàđiềunàythựchiệndễdànghơnchúng ta nghĩHãynhìn ở đây 2 vídụvềviệctạotínhnhậndiệncho Icon. Khôngquátốtnhưngcũnglàcâynhàlávườn.Ủnỉnbêntaytrái, các icon cóchungnhậndiệnkhicócùng format nằmtrênbảnggỗtròn hay cùngnằmtrênkhaygỗngang.Khuvườntrênmâythậmchítốthơn, các icon vớisựđồngdạngrấtcaovàthểhiệnchochuỗicáctínhnăngtươngđồng. Ngườichơichỉcần click vào 1-2 icon làcóthểhiểunhữngcáicònlại
Cóthểthấyrằng, những game đượcthiếtkếtốt, họsẽluôncố ý gomdùm gamer các icon vớiđặctínhchứcnăngtươngđồngnhauvềcùng 1 chỗ, vàcùngmộtkiểunhậndiện.Đồngdạng icon, sửdụng tooltip,vàbốtrícùngmộtkhuvựclànhững bướcđểtạođượctínhnhậndiệncho iconVàsựnhậndiệntheonhómnàycũnglàtiềnđềđểthựchiện 1 yêucầuquantrọnghơntrongthiếtkế UI, từkinhnghiệmcủamình, tôigọinólà…
… Nguyêntắcbàntaynămngón.Mộtcáchrấttựnhiênvàhiểnnhiên, mỗibàntaycó 5 ngóntay. Vàmộtđiềuhiểnnhiênkhác, con ngườichỉtiếpthuđượctốiđa (hếtsứccốgắng) 5 việcmớicùngmộtlúc. Con sốnàythườnglà 3-4.Gamer tiếpxúcvới game nóichungvàgiaodiệnnóichungcũngvậy, họsẽcảmthấyngộpnếuphảicùngmộtlúcnắmbắtnhiềuhơn 5 thông tin cùnglúc.HãylấyvídụtừỦnỈn… Hãychotôibiếtbạnsẽphânvùnggiaodiệnchínhnàytheo ý bạnnhưthếnào. Game phânvùngmainscreenrathành 6 mảnggiaodiệnchính, nóichocùngđiềunàydễgâybốirốichongườichơi, màđặcbiệtlàngườichơimớiVới my Fish, tìnhtrạngtươngtự, Icon cóvẻnhỏhơnnêndùsaocũngcònthấythoánghơn.Nhưngsựthậtcũngchẳnglàmdễsửdụnghơn.
Hiện nay, chúngtôiđangcốgắngthửnghiệmtinhgọngiaodiệntheohướngnàychocácsảnphẩmcủamình, vàtấtnhiênlàphảitheomộthìnhmẫuđiểnhìnhnàođó.TôiđangmuốnnóiđếnZyngavớinhững minh chứngchoviệchọđãlàmrấttốtviệcnày. Các game đềucốgắngbốcụcmainscreenvới con số 4 mảng. Đểđạtđượcđiềuđó, tấtnhiênhọchútrọngđếnnhữngthaotácvàthông tin thựcsựcầnthiết.
Ngườichơisẽkhôngcầnphảitốnnhiềubộnhớvàthờigianđểtìmhiểu UI màthayvàođólàthưởngthứcnội dung game củanhàpháttriển.Vàđócũnglàđiềumàchúng ta cũngphảihiểuvềtâmlý gamer. Họkhôngmuốntốnnhiềuthờigian… Hay nóicáchkhác…
…Họluônvộivã.Vìsao ư, vìtấtnhiênhọđangchơi game đểthưgiãn.. Vàhọmuốnđạtđượcđiềumìnhmuốnmộtcáchnhanhnhất… Cómộtvàiđiểmthỏamãnsựvộivãnày, vídụnhưgiảmthiểusốbướcthựchiệnmộttácvụnàođó, xemxétcáctrườnghợphoàntácvônghĩacho gamer, v..v. Nhưngtôimuốnnhấnmạnhđếnmộtđiểmquantrọnghơnmàchúng ta dễdàngquênđi.Đólà… Họthích click nhiềuhơnlàthíchđọc.Hãyxem qua mộtvídụtươngtựchứkhôngphảilà game đểhiểuhơnmộtchútvềvấnđềnày… Tôiđangnóiđếnthiếtkế web.
Bêntaytráilàtrang web màchúng ta thiếtkế.(1)Nhưngxuhướngchungthìngười ta chỉthấynhữnggìhọmuốntìm… Vàlướt qua nhữngthứcònlại. HãynhìnbêntayphảiđểthấysựthậtRấtdễhiểu… Điềutươngtựcũngxảyrađốivớigiaodiện game
Hãylấy 2 vídụcủa 2 game đểthấyrõhơn… VớiỦnỉn, nội dung cầnthamkhảorấtnhiềutrướckhingườichơitớiđượcnútthựchiện. Vôtìnhkhiếnngười ta lườibấmhoặcbấmmàhậmhựcCáchgiảiquyếtcủa my fish dễchịuhơnkhinútthựchiệnđặtngangvớinội dung, ngườichơikocầnphảilướt qua quánhiềuthông tin đểthựchiệnđiềumìnhmuốn, thậmchícònkocónútnhận quest. Nóichocùngthìcầngì confirm việcnhận quest?
Hãyluônnhớrằng, ngườichơitốnbaonhiêucôngsứcđểđếnđượcvớinútbấmthìhọcũngbịgiảmđibấynhiêusựhứngthúvớicôngviệcmìnhđangthựchiện. Cóthểthấyđólàthiếtkếchungcủagiaodiện game SNS khimànútbấmvànội dung luôncó 1 vịthếnganghàngvànútbấmbaogiờcũnglàmchodễnhậnrahơnVàđócũnglàđiềumàchúng ta luônluônphảihướngđến.
…hãyhướngsựchú ý củahọđếnvớicácnútbấm… Hãylàmchonónổilên, ngườichơi click càngnhiềuthìcàngcólợichochúng ta.Trênđâylàđôiđiều chia sẻvềhành vi ngườidùngtrongviệcsửdụng UI của SNS game.Chúng ta sẽđếnvớimộtphầnkháctrongbuổi chia sẻhôm nay, mộtphươngdiệnítkhô khan hơn, đólàvềmỹthuậtcho UI… Màcụthể…
… TrướctiênlàPhủvậtliệulêngiaodiện…. nhìnchungđâylàxuhướngcủahơn 2 năm qua vớisựrađời ồ ạtcủacác game nuôitrồng… Thờikìcủacácgiaodiệnmangmàusắcgầngũivàcáchọatiếtvậtliệucóvẻđangrấtthịnh.
Vàthànhthậtmànói, nếucácbạnmuốnchọnmộtgiảiphápnhanhchóngvà an toàn, hãyápdụngphươngphápnàymộtcáchtốiđavìnóluônpháthuyhiệuquả, Giaodiệnđượctrauchuốtvềmặthọatiếtvàvậtliệuluônlàmtănggiátrịcủa game.Nhưngcácbạncũngcóthểthửđitheomộtxuhướngthiếtkếđanglớnmạnhlênvàcókhảnănglớnsẽlàxuhướngthiếtkếcủatươnglai.
...ĐólàXu hướng thiết kế không đường viền… Chúng ta bắtgặptràolưunàytrongcácthiếtkếnộithấtchủnghĩatốigiản, hoặctrongcácthiếtkếthờitrangkhôngđườnglai…Nhưngcổxúymạnhmẽnhấtchínhlàcácsảnphẩmđiệntử… Chúng ta đangđónchàongàycàngnhiềunhữngthiếtbịđiệntửmangdángvẻhiệnđạivàsắcsảonày..
Vàxuhướng borderless cũngđã xuất hiện trong thiết kế UI và đưa lại những cảm nhận vô cùng tươi mới.Chưacónhiều game đitheotràolưunày, Tôicó ở đâychỉ 1 vídụkhôngbiếtvôtình hay cố ý nhưngrõràngcảmnhậnvềnósảngkhoáivàhiệnđạihơnnhữnggiaodiệnmàtôiđãtừngthựchiện . Chắcchắntrongthờigianngắnsắptới, UI cũngsẽkhôngđứngngoàixuhướngđó…Ngaybâygiờ, chúng ta cóthểbắttayvàođểthửnghiệmmộtphongcáchmớiđilàvừa.Cònbâygiờ, tôixinnóivớicácbạnđiềutâm can cuốicùngtrongbài present này, màtôi cam đoanrằngnhiềubạntrongkhánphòngnàysẽgậtđầutâmđắc.
Đólàvấnđềnênthửnghiệm hay nênbànluậnvề UI thìsẽhiệuquảhơn.Theo cácbạnthìsao..Lúctrước, giaodiệncủaỦnỈnđãphảimấthơn 6 thángđểhoànthànhchỉbởivìtranhcãiquánhiềuvềcáchsửdụngcủanó… Khiđangđượcthựchiện, các ý kiếnđónggópđếndồndậpvàgiaodiệnphảisửađisửalạikhôngbiếtbaonhiêulần… Đóthựcsựlàmộtsựđaukhổ, triệttiêumọi ý tưởngsángtạo.Rấtđơngiảnđểtránhkhỏiviệcnày… Lênkếhoạch chi tiếtcho UI ngaytừđầu. Tiếntrìnhchơi game giảđịnhcủangườichơilàgì, vàđiềuđógiúpíchvôcùngnhiềuđếnchuyệnsuônsẻcủathiếtkế UIVàthayvìcứngồimàtranhluậnthìchúng ta nêntiếnhànhmộtcáchkhoahọchơn..
… Đólàthửnghiệm UI:UI làmxong, đượcchomộtnhómdùngthử, nhận comment từphíangườidùng, phântíchvàsửalạinhững comment xấu, test lạilầnnữa, vàcứthếtiếpdiễn.Vớinhữngdựánmớiđangthựchiện, chúngtôiđangcốgắngápdụng qui trìnhnày, vàsựthậtthìnólàmchocôngviệccủachúngtôisuônsẻvàtốnítthờigianhơnnhiều.Vậythìsaubuổihôm nay, cácbạncóthểvềchỗlàmcủamìnhvànóivớingườisếp hay đilạiphíabànlàmviệccủabạnrằng: anhhãyđểemlàmxong UI vàchoanhthử, lúcđóanhcóthểgóp ý choemcũngđược…Chúccácbạn may mắn..
Tôiđãnóivớicácbạnvề….Sẽcòncóthêmnhiềuđiều chi tiếthơntôimuốn chia sẽchocácbạn, nhưngvớithờilượngcóhạn, tôinghĩmìnhsẽdànhviệcđóchomộtdịpkhác. Nhưcácbạnthấy, Giaodiệnkophảilàmộtcôngviệcđơngiảnvàchánchường, đólàmộtkhoahọccầncảsựtinhtế, guthẩmmỹvà logic, vànóẩnchứanhiềuđiềuchờđợichúng ta khámphá. Vìthếmỗingườitrongcácbạn, cóthểsẽvìđammê, cóthểvìcôngviệcchỉđịnh, nhưngkhithờicơđến, tôi tin rằngcácbạnsẽluônsẵnsàngđểnóirằng….