SlideShare a Scribd company logo
1 of 27
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
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, let’s make
it easy to understand.(explanatory)
 Don’t make them think
 They’re always impatient
Common usabilities
 Don’t make them think!
– Icon Identification
– 5 fingers
Common usabilities
 Don’t make me think!
Icon Identification
 Don’t make me think!
Icon Identification
Icon Identification
 Don’t make me think!
 Don’t make me think!
5 fingers
 Don’t make me think!
5 fingers
5 fingers
 Don’t make me think!
 They’re always impatient.
– They don’t read, they CLICK
Common usabilities
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
 They’re always impatient
They don’t read, they click
They don’t read, they click
 They’re always impatient
 They don’t read, they click
 They’re always impatient
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
 Discussing:
– Wasting time
– Killing the creativity
Testing or discussing UI
 Test- comment- fix- test- comment- fix- test…
Testing or discussing UI
Conclusion
- Icon Identification
- 5 fingers
- They don’t read, they click
- Texturizing
- Borderless
- Testing UI, not discussing.
I want to be a GUI designer
Q&A
Become a GUI Designer with Proper Usability and Testing

More Related Content

What's hot

What's hot (11)

Evolutionv creation[1]
Evolutionv creation[1]Evolutionv creation[1]
Evolutionv creation[1]
 
4. proposal
4. proposal4. proposal
4. proposal
 
7. evaluation(2) (1) nasahsahs
7. evaluation(2) (1) nasahsahs7. evaluation(2) (1) nasahsahs
7. evaluation(2) (1) nasahsahs
 
Computer Games - Character Design - Stereotypes
Computer Games - Character Design - StereotypesComputer Games - Character Design - Stereotypes
Computer Games - Character Design - Stereotypes
 
Game design part 2
Game design   part 2Game design   part 2
Game design part 2
 
Page 5
Page 5Page 5
Page 5
 
7. evaluation(2)
7. evaluation(2)7. evaluation(2)
7. evaluation(2)
 
Initial plans
Initial plansInitial plans
Initial plans
 
Genres in Gaming
Genres in GamingGenres in Gaming
Genres in Gaming
 
2. proposal
2. proposal2. proposal
2. proposal
 
Video games
Video gamesVideo games
Video games
 

Viewers also liked

The Resume is Not Dead...Racing Toward the Future
The Resume is Not Dead...Racing Toward the FutureThe Resume is Not Dead...Racing Toward the Future
The Resume is Not Dead...Racing Toward the FutureRobin Schooling
 
Childrens muslim-clothing
Childrens muslim-clothingChildrens muslim-clothing
Childrens muslim-clothinghilalplaza
 
Jinn & Human Sickness
Jinn & Human SicknessJinn & Human Sickness
Jinn & Human Sicknesshilalplaza
 
Strategic Analysis and Knowledge Support (SAKSS): informing the implementatio...
Strategic Analysis and Knowledge Support (SAKSS): informing the implementatio...Strategic Analysis and Knowledge Support (SAKSS): informing the implementatio...
Strategic Analysis and Knowledge Support (SAKSS): informing the implementatio...CTA
 
Conflict and cooperation of water users in Nduruma sub-catchment: the role of...
Conflict and cooperation of water users in Nduruma sub-catchment: the role of...Conflict and cooperation of water users in Nduruma sub-catchment: the role of...
Conflict and cooperation of water users in Nduruma sub-catchment: the role of...CTA
 
Science, indigenous knowledge & innovation challenges
Science, indigenous knowledge & innovation   challengesScience, indigenous knowledge & innovation   challenges
Science, indigenous knowledge & innovation challengesCTA
 
Economic and environmental related aspects of water storage in Sub-Saharan Af...
Economic and environmental related aspects of water storage in Sub-Saharan Af...Economic and environmental related aspects of water storage in Sub-Saharan Af...
Economic and environmental related aspects of water storage in Sub-Saharan Af...CTA
 
Precious pearls
Precious pearlsPrecious pearls
Precious pearlshilalplaza
 
Hair accessories women-islamic-clothes
Hair accessories women-islamic-clothesHair accessories women-islamic-clothes
Hair accessories women-islamic-clotheshilalplaza
 
Ogdc 2013 how retention rate affects aniworld
Ogdc 2013 how retention rate affects aniworldOgdc 2013 how retention rate affects aniworld
Ogdc 2013 how retention rate affects aniworldSon Aris
 
The dual challenge: doubling yields in the face of water scarcity and climate...
The dual challenge: doubling yields in the face of water scarcity and climate...The dual challenge: doubling yields in the face of water scarcity and climate...
The dual challenge: doubling yields in the face of water scarcity and climate...CTA
 
Ogdc 2013 choosing the right database for social mobile game
Ogdc 2013 choosing the right database for social mobile gameOgdc 2013 choosing the right database for social mobile game
Ogdc 2013 choosing the right database for social mobile gameSon Aris
 
Agricultural Water Use in River basins : A Comparison between the Limpopo and...
Agricultural Water Use in River basins : A Comparison between the Limpopo and...Agricultural Water Use in River basins : A Comparison between the Limpopo and...
Agricultural Water Use in River basins : A Comparison between the Limpopo and...CTA
 
About game design
About game designAbout game design
About game designSon Aris
 
Ogdc 2013 network stragegy for mmo game
Ogdc 2013 network stragegy for mmo gameOgdc 2013 network stragegy for mmo game
Ogdc 2013 network stragegy for mmo gameSon Aris
 
CTA’s experience in ICM and Knowledge sharing for integrated water management...
CTA’s experience in ICM and Knowledge sharing for integrated water management...CTA’s experience in ICM and Knowledge sharing for integrated water management...
CTA’s experience in ICM and Knowledge sharing for integrated water management...CTA
 

Viewers also liked (20)

Comoros
ComorosComoros
Comoros
 
The Resume is Not Dead...Racing Toward the Future
The Resume is Not Dead...Racing Toward the FutureThe Resume is Not Dead...Racing Toward the Future
The Resume is Not Dead...Racing Toward the Future
 
Childrens muslim-clothing
Childrens muslim-clothingChildrens muslim-clothing
Childrens muslim-clothing
 
Sierra leone
Sierra leoneSierra leone
Sierra leone
 
Jinn & Human Sickness
Jinn & Human SicknessJinn & Human Sickness
Jinn & Human Sickness
 
Strategic Analysis and Knowledge Support (SAKSS): informing the implementatio...
Strategic Analysis and Knowledge Support (SAKSS): informing the implementatio...Strategic Analysis and Knowledge Support (SAKSS): informing the implementatio...
Strategic Analysis and Knowledge Support (SAKSS): informing the implementatio...
 
Indonesia
IndonesiaIndonesia
Indonesia
 
Conflict and cooperation of water users in Nduruma sub-catchment: the role of...
Conflict and cooperation of water users in Nduruma sub-catchment: the role of...Conflict and cooperation of water users in Nduruma sub-catchment: the role of...
Conflict and cooperation of water users in Nduruma sub-catchment: the role of...
 
Science, indigenous knowledge & innovation challenges
Science, indigenous knowledge & innovation   challengesScience, indigenous knowledge & innovation   challenges
Science, indigenous knowledge & innovation challenges
 
Economic and environmental related aspects of water storage in Sub-Saharan Af...
Economic and environmental related aspects of water storage in Sub-Saharan Af...Economic and environmental related aspects of water storage in Sub-Saharan Af...
Economic and environmental related aspects of water storage in Sub-Saharan Af...
 
Precious pearls
Precious pearlsPrecious pearls
Precious pearls
 
Hair accessories women-islamic-clothes
Hair accessories women-islamic-clothesHair accessories women-islamic-clothes
Hair accessories women-islamic-clothes
 
Ogdc 2013 how retention rate affects aniworld
Ogdc 2013 how retention rate affects aniworldOgdc 2013 how retention rate affects aniworld
Ogdc 2013 how retention rate affects aniworld
 
The dual challenge: doubling yields in the face of water scarcity and climate...
The dual challenge: doubling yields in the face of water scarcity and climate...The dual challenge: doubling yields in the face of water scarcity and climate...
The dual challenge: doubling yields in the face of water scarcity and climate...
 
Ogdc 2013 choosing the right database for social mobile game
Ogdc 2013 choosing the right database for social mobile gameOgdc 2013 choosing the right database for social mobile game
Ogdc 2013 choosing the right database for social mobile game
 
Agricultural Water Use in River basins : A Comparison between the Limpopo and...
Agricultural Water Use in River basins : A Comparison between the Limpopo and...Agricultural Water Use in River basins : A Comparison between the Limpopo and...
Agricultural Water Use in River basins : A Comparison between the Limpopo and...
 
About game design
About game designAbout game design
About game design
 
Chad
ChadChad
Chad
 
Ogdc 2013 network stragegy for mmo game
Ogdc 2013 network stragegy for mmo gameOgdc 2013 network stragegy for mmo game
Ogdc 2013 network stragegy for mmo game
 
CTA’s experience in ICM and Knowledge sharing for integrated water management...
CTA’s experience in ICM and Knowledge sharing for integrated water management...CTA’s experience in ICM and Knowledge sharing for integrated water management...
CTA’s experience in ICM and Knowledge sharing for integrated water management...
 

More from Son Aris

Main land china mobile app market 2014. what you need to know
Main land china mobile app market 2014. what you need to knowMain land china mobile app market 2014. what you need to know
Main land china mobile app market 2014. what you need to knowSon Aris
 
Vietnam Digital Marketing Market Overview
Vietnam Digital Marketing Market OverviewVietnam Digital Marketing Market Overview
Vietnam Digital Marketing Market OverviewSon Aris
 
Mobile Game In China 2013-2014
Mobile Game In China 2013-2014Mobile Game In China 2013-2014
Mobile Game In China 2013-2014Son Aris
 
Japans social gaming market 2013
Japans social gaming market 2013Japans social gaming market 2013
Japans social gaming market 2013Son Aris
 
In mobi app_insight_report
In mobi app_insight_reportIn mobi app_insight_report
In mobi app_insight_reportSon Aris
 
Ogdc 2013 am i ready to go startup
Ogdc 2013 am i ready to go startupOgdc 2013 am i ready to go startup
Ogdc 2013 am i ready to go startupSon Aris
 
Ogdc 2013 zing me mobile
Ogdc 2013 zing me mobileOgdc 2013 zing me mobile
Ogdc 2013 zing me mobileSon Aris
 
Ogdc 2013 the importance of in game event
Ogdc 2013 the importance of in game eventOgdc 2013 the importance of in game event
Ogdc 2013 the importance of in game eventSon Aris
 
Ogdc 2013 spine anim20131
Ogdc 2013 spine anim20131Ogdc 2013 spine anim20131
Ogdc 2013 spine anim20131Son Aris
 
Ogdc 2013 psychology applied 2013
Ogdc 2013 psychology applied 2013Ogdc 2013 psychology applied 2013
Ogdc 2013 psychology applied 2013Son Aris
 
Ogdc 2013 prototyping mobile games
Ogdc 2013 prototyping mobile gamesOgdc 2013 prototyping mobile games
Ogdc 2013 prototyping mobile gamesSon Aris
 
Ogdc 2013 monetization experience
Ogdc 2013 monetization experienceOgdc 2013 monetization experience
Ogdc 2013 monetization experienceSon Aris
 
Ogdc 2013 mobile game trend in southeastasia
Ogdc 2013 mobile game trend in southeastasiaOgdc 2013 mobile game trend in southeastasia
Ogdc 2013 mobile game trend in southeastasiaSon Aris
 
Ogdc 2013 lets remake the wheel
Ogdc 2013 lets remake the wheelOgdc 2013 lets remake the wheel
Ogdc 2013 lets remake the wheelSon Aris
 
Ogdc 2013 how to distribute content touser for social and mobile game
Ogdc 2013 how to distribute content touser for social and mobile gameOgdc 2013 how to distribute content touser for social and mobile game
Ogdc 2013 how to distribute content touser for social and mobile gameSon Aris
 
Ogdc 2013 game design problem solving
Ogdc 2013 game design problem solvingOgdc 2013 game design problem solving
Ogdc 2013 game design problem solvingSon Aris
 
Ogdc 2013 cross platform game development with html5
Ogdc 2013 cross platform game development with html5Ogdc 2013 cross platform game development with html5
Ogdc 2013 cross platform game development with html5Son Aris
 
Ogdc 2013 cross platform game development for mobile web
Ogdc 2013 cross platform game development for mobile webOgdc 2013 cross platform game development for mobile web
Ogdc 2013 cross platform game development for mobile webSon Aris
 
Ogdc 2013 2d artist the first steps
Ogdc 2013 2d artist the first stepsOgdc 2013 2d artist the first steps
Ogdc 2013 2d artist the first stepsSon Aris
 
The story inside art of camgioi
The story inside art of camgioiThe story inside art of camgioi
The story inside art of camgioiSon Aris
 

More from Son Aris (20)

Main land china mobile app market 2014. what you need to know
Main land china mobile app market 2014. what you need to knowMain land china mobile app market 2014. what you need to know
Main land china mobile app market 2014. what you need to know
 
Vietnam Digital Marketing Market Overview
Vietnam Digital Marketing Market OverviewVietnam Digital Marketing Market Overview
Vietnam Digital Marketing Market Overview
 
Mobile Game In China 2013-2014
Mobile Game In China 2013-2014Mobile Game In China 2013-2014
Mobile Game In China 2013-2014
 
Japans social gaming market 2013
Japans social gaming market 2013Japans social gaming market 2013
Japans social gaming market 2013
 
In mobi app_insight_report
In mobi app_insight_reportIn mobi app_insight_report
In mobi app_insight_report
 
Ogdc 2013 am i ready to go startup
Ogdc 2013 am i ready to go startupOgdc 2013 am i ready to go startup
Ogdc 2013 am i ready to go startup
 
Ogdc 2013 zing me mobile
Ogdc 2013 zing me mobileOgdc 2013 zing me mobile
Ogdc 2013 zing me mobile
 
Ogdc 2013 the importance of in game event
Ogdc 2013 the importance of in game eventOgdc 2013 the importance of in game event
Ogdc 2013 the importance of in game event
 
Ogdc 2013 spine anim20131
Ogdc 2013 spine anim20131Ogdc 2013 spine anim20131
Ogdc 2013 spine anim20131
 
Ogdc 2013 psychology applied 2013
Ogdc 2013 psychology applied 2013Ogdc 2013 psychology applied 2013
Ogdc 2013 psychology applied 2013
 
Ogdc 2013 prototyping mobile games
Ogdc 2013 prototyping mobile gamesOgdc 2013 prototyping mobile games
Ogdc 2013 prototyping mobile games
 
Ogdc 2013 monetization experience
Ogdc 2013 monetization experienceOgdc 2013 monetization experience
Ogdc 2013 monetization experience
 
Ogdc 2013 mobile game trend in southeastasia
Ogdc 2013 mobile game trend in southeastasiaOgdc 2013 mobile game trend in southeastasia
Ogdc 2013 mobile game trend in southeastasia
 
Ogdc 2013 lets remake the wheel
Ogdc 2013 lets remake the wheelOgdc 2013 lets remake the wheel
Ogdc 2013 lets remake the wheel
 
Ogdc 2013 how to distribute content touser for social and mobile game
Ogdc 2013 how to distribute content touser for social and mobile gameOgdc 2013 how to distribute content touser for social and mobile game
Ogdc 2013 how to distribute content touser for social and mobile game
 
Ogdc 2013 game design problem solving
Ogdc 2013 game design problem solvingOgdc 2013 game design problem solving
Ogdc 2013 game design problem solving
 
Ogdc 2013 cross platform game development with html5
Ogdc 2013 cross platform game development with html5Ogdc 2013 cross platform game development with html5
Ogdc 2013 cross platform game development with html5
 
Ogdc 2013 cross platform game development for mobile web
Ogdc 2013 cross platform game development for mobile webOgdc 2013 cross platform game development for mobile web
Ogdc 2013 cross platform game development for mobile web
 
Ogdc 2013 2d artist the first steps
Ogdc 2013 2d artist the first stepsOgdc 2013 2d artist the first steps
Ogdc 2013 2d artist the first steps
 
The story inside art of camgioi
The story inside art of camgioiThe story inside art of camgioi
The story inside art of camgioi
 

Recently uploaded

Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Manik S Magar
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek SchlawackFwdays
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsPixlogix Infotech
 
Advanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionAdvanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionDilum Bandara
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 3652toLead Limited
 
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsMiki Katsuragi
 
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024Lorenzo Miniero
 
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Enterprise Knowledge
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubKalema Edgar
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsMark Billinghurst
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Mark Simos
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsRizwan Syed
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):comworks
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brandgvaughan
 
Story boards and shot lists for my a level piece
Story boards and shot lists for my a level pieceStory boards and shot lists for my a level piece
Story boards and shot lists for my a level piececharlottematthew16
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationSlibray Presentation
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity PlanDatabarracks
 

Recently uploaded (20)

Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and Cons
 
Advanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionAdvanced Computer Architecture – An Introduction
Advanced Computer Architecture – An Introduction
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
 
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering Tips
 
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024
 
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024
 
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special EditionDMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding Club
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
 
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptxE-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR Systems
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL Certs
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
 
Story boards and shot lists for my a level piece
Story boards and shot lists for my a level pieceStory boards and shot lists for my a level piece
Story boards and shot lists for my a level piece
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck Presentation
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity Plan
 

Become a GUI Designer with Proper Usability and Testing

Editor's Notes

  1. 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.
  2. 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…
  3. Đầ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ì
  4. Đó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
  5. 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.
  6. 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…
  7. 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
  8. 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à…
  9. … 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.
  10. 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.
  11. 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…
  12. …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.
  13. 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
  14. 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?
  15. 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.
  16. …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ể…
  17. … 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ì…
  18. … 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.
  19. 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.
  20. ...Đó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..
  21. 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.
  22. Đó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..
  23. … Đó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..
  24. 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….