I want to be a GUI designerSNS Gamer usability and mission of the designersPresenter: Nguyễn Xuân Phú- 2D art team leader ...
Content Common usabilities Trends of UI art. Testing or discussing UI?
Common usabilities GUI have to be self-evident, which means  gamers can get it on sight. When GUI can’t be self-evident,...
Common usabilities Don’t make them think They’re always impatient
Common usabilities Don’t make them think!  – Icon Identification  – 5 fingers
 Don’t make me think! Icon Identification
 Don’t make me think! Icon Identification
 Don’t make me think! Icon Identification
 Don’t make me think! 5 fingers
 Don’t make me think! 5 fingers
 Don’t make me think! 5 fingers
Common usabilities They’re always impatient.  – They don’t read, they CLICK
 They’re always impatient   They don’t read, they clickWhat we think: let’s write some    What a gamer thinks: across the...
 They’re always impatient They don’t read, they click
 They’re always impatient They don’t read, they click
 They’re always impatient They don’t read, they click
Trends of UI Art Texturizing Borderless
 Trends of UI art Texturizing
 Trends of UI art Texturizing
 Trends of UI art Borderless
 Trends of UI art Borderless
Testing or discussing UI Discussing:  – Wasting time  – Killing the creativity
Testing or discussing UI Test- comment- fix- test- comment- fix- test…
Conclusion-   Icon Identification-   5 fingers-   They don’t read, they click-   Texturizing-   Borderless-   Testing UI, ...
I want to be a GUI designer
Q&A
I want to be a GUI designer- gamer usability and designer mission
Upcoming SlideShare
Loading in …5
×

I want to be a GUI designer- gamer usability and designer mission

1,939 views

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,939
On SlideShare
0
From Embeds
0
Number of Embeds
1,026
Actions
Shares
0
Downloads
29
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • 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ể…
  • … Làvềxuhướngtrongthểhiệnmỹthuậtcho UIThứnhấtxuhướngphủvậtliệu,Thứhaixuhướng borderless.Vậyxuhướngnàynghĩalàgì…
  • … 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….
  • I want to be a GUI designer- gamer usability and designer mission

    1. 1. I want to be a GUI designerSNS Gamer usability and mission of the designersPresenter: Nguyễn Xuân Phú- 2D art team leader of GSS GUI: graphical user interface
    2. 2. Content Common usabilities Trends of UI art. Testing or discussing UI?
    3. 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. 4. Common usabilities Don’t make them think They’re always impatient
    5. 5. Common usabilities Don’t make them think! – Icon Identification – 5 fingers
    6. 6.  Don’t make me think! Icon Identification
    7. 7.  Don’t make me think! Icon Identification
    8. 8.  Don’t make me think! Icon Identification
    9. 9.  Don’t make me think! 5 fingers
    10. 10.  Don’t make me think! 5 fingers
    11. 11.  Don’t make me think! 5 fingers
    12. 12. Common usabilities They’re always impatient. – They don’t read, they CLICK
    13. 13.  They’re always impatient They don’t read, they clickWhat we think: let’s write some What a gamer thinks: across the great literature or at least as field with a race car and stop much as better where we find interesting
    14. 14.  They’re always impatient They don’t read, they click
    15. 15.  They’re always impatient They don’t read, they click
    16. 16.  They’re always impatient They don’t read, they click
    17. 17. Trends of UI Art Texturizing Borderless
    18. 18.  Trends of UI art Texturizing
    19. 19.  Trends of UI art Texturizing
    20. 20.  Trends of UI art Borderless
    21. 21.  Trends of UI art Borderless
    22. 22. Testing or discussing UI Discussing: – Wasting time – Killing the creativity
    23. 23. Testing or discussing UI Test- comment- fix- test- comment- fix- test…
    24. 24. Conclusion- Icon Identification- 5 fingers- They don’t read, they click- Texturizing- Borderless- Testing UI, not discussing.
    25. 25. I want to be a GUI designer
    26. 26. Q&A

    ×