Embed Size (px)
Citation preview
USER EXPERIENCE DESIGNJuthamas Vadhanapanich
JUTHAMAS VADHANAPANICHART DIRECTOR / UI & UX DESIGNER
August 2013 - PresentART DIRECTOR / COCONUTS MEDIA LIMITEDHead of art department. Manage multiple projects from concept through completion. I am charged with deter-mining the best ways for us to visually represent the company’s identity.
- Art direction- UI/UX direction - Storytelling idea on VDO project- Photography selection
13 years of experienceJanuary 2012 - PresentSENIOR ONLINE MARKETING EXECUTIVE / HOUSE OF GRIFFINWork on the digital media and marketing, social media, onsite implementation and general design. Analyze the website and business situations quickly. Develop insightful, thorough reommendations to improve techni-cal, design, content, on-page and o�-page optimization elements.
I do flexibility, creativity, project and time management, business savvy and excellent verbal and written commu-nications. I have experience with social media, product launches, web analytics tools (Google Analytics), search engine marketing (SEM) and search engine optimization (SEO). I am also responsible for doing SEO and Adwords. Plus I do graphic design, product design and web design.
January 2010 - July 2013VISUAL DESIGNER / REUTERS SOFTWARE (THAI-LAND) LIMITEDDesign financial (stocks, currency exchange, markets) UI/UX for software, iPad, iPhone, widgets and website. I design interface for KBC Bank (Belgian universal multi-channel bank), Barclays (UK) and DBS Bank. I also design LCD TV interface (big screen on the wall) for Shenzhen Stock Exchange in China. I coordinate with product managers and programmers to ensure sitemap, flow diagrams and wireframes are properly translated to the live site. I also do the HTML5/CSS3.
The project I'm working on is "Internet Suite" the native application on iPad. The Internet Suite app allow you to view market quotes, news and charts sourced from Thomson Reuters Internet Suite (TRIS) product.
JUTHAMAS VADHANAPANICHART DIRECTOR / UI & UX DESIGNER
Education Medias1996 - 1999Srinakharinwirot UniversityBachelor Degree of Fine Arts (major: Visual Arts and Communications Design) Grade / GPA: 3.19
1990 - 1994Triamudomsuksa Nomklao SchoolGrade 12 (major: Arts and French) Grade / GPA: 3.0
Age 3 - Grade 6Benjamin College Grade / GPA: 3.1
September 11, 2007AN INTERVIEW ON DAILY NEWSI gave an interview on Techonology section about my blog www.juth.net
2010AN INTERVIEW ON T.A.B. RADIOI was interviewed by DJ Private on T.A.B. Radio which created by Foundation for the blind in Thailand. We discussed about how web accessibility was going in Thailand.
SkillsHTML5
CSS3
Responsive Web Design
Sketch App
Photoshop
Illustration
Dreamweaver
Cartoon Character Design
WHAT ISUSER EXPERIENCE DESIGN?User experience (abbreviated as UX) is how a person feels when interfacing with a system.
The system could be a website, a web application or desktop software and, in modern contexts, is
generally denoted by some form of human-computer interaction (HCI).
การออกแบบประสบการณการใชงานของผูใช คืออะไรคือ ทุกมุมมองที่ผูใชไดมีปฏิสัมพันธกับบริษัท, สินคา, และบริการคือ ความพึงพอใจของผูใชที่มีตอการใชงาน
Those who work on UX (called UX designers) study and evaluate how users feel about a system, looking at such things as ease of use, perception of the value of the system, utility, e�ciency in performing tasks and so forth.
UX designers also look at sub-systems and processes within a system. For example, they might study the checkout process of an e-commerce website to see whether users find the process of buying products from the website easy and pleasant. They could delve deeper by studying components of the sub-system, such as seeing how e�cient and pleasant is the experience of users fill-ing out input fields in a Web form.
Compared to many other disciplines, particularly Web-based sys-tems, UX is relatively new. The term “user experience” was coined by Dr. Donald Norman, a cognitive science researcher who was also the first to describe the importance of user-centered design (the notion that design decisions should be based on the needs and wants of users).
What Is User Experience?
Stop Thinking About Interfaces, Start Designing Experiences
เมื่อพูดถึง User Experience Design คงจะขาดไมไดที่จะพูดถึง
USER INTERFACE DESIGN
USABILITY DESIGNการออกแบบใหงายตอผูใช และใหมีความสามารถในการใชงาน
Definition of Usability = how easy & pleasant these features are to use.
การออกแบบหนาตาอินเตอรเฟซ อินเตอรเฟซ คือ การติดตอประสานระหวางเครื่องคอมพิวเตอร กับผูใช ยกตัวอยาง เชน สวิชทพัดลม ก็คือชองทางใหผูใชติดตอ สื่อสาร และควบคุมเครื่องจักร
ยกตัวอยางงายๆ
USER INTERFACE DESIGN
USABILITY DESIGN
USER EXPERIENCE DESIGN
A contact form for a user to submit a complaint
A contact form with only 3 fields that's clearly labelled
Having someone respond to the message within 10 minutes
PRODUCT DESIGN
USABILITY DESIGN
USER EXPERIENCE DESIGN
The original iMac
Everything is built in, no confusing cables
When you open the box, the first thing you see is a handle - to help you lift it out.
UX DESIGNERJOB DESCRIPTION
Work with clients to understand detailed requirements and design complete user experiences that meet client
needs and vision
Design and deliver wire frames, user stories, user journeys, and mock ups optimized for a wide range of devices and
interfaces
Adapt soliciting and using customer insights as well as thinks intuitively about customer needs
Strong conceptualization ability, design thinking and strong visual communication ability
Producing e�ective and attractive digital solutions within a timeframe
Collaborate e�ciently with designers, production managers and developers
Can think at all layers, from product (system) design, to interaction, to beautiful pixels
Demonstrated success in designing and delivering compelling products in a high growth, fast pace rapidly changing
environment that delight users
Solid understanding of grid systems, typography, web and mobile interface trends
Collaborative mindset and interest in working with product and engineering teams to ship products
WHAT DOES AN UX DESIGNERACTUALLY DO?
CONTENT INVENTORY
In the simplest of terms, content inventory is an organized list of pages on a website. Doing a content inventory is a step towards proposing changes in information architecture to enhance the user experience (e.g. user flow, find-ability and e�ciency).
WIREFRAMESA wireframe—a rough guide for the layout of a website or app—is the deliverable most famously associated with being a UX Designer.
Based on their findings, UX specialists might develop wireframes of di�erent layouts and perhaps also higher-fidelity prototypes.
Many designers have di�erent processes for how they work. Some might skip sketching and jump straight to wireframes. Some might skip wireframing and jump straight to mock-ups. But when you skip one or the either, you lose a lot of conceptual detail and refine-ment. The interface su�ers because it enters into a stage prematurely and isn’t thoroughly refined.
Sketch Wireframing can be done simply with pen and paper.
Wireframe, prototype, mockup – what’s the difference?What is a wireframe?A wireframe is a low fidelity representation of a design. It should clearly show:– the main groups of content (what?)– the structure of information (where?)– a description and basic visualisation of the user – interface interaction (how?)
What is a prototype?A prototype, often confused with a wireframe, is a middle to high fidelity representation of the final product, which simulates user interface inter-action. It should allow the user to:– experience content and interactions with the interface– test the main interactions in a way similar to the final product
What is a mockup?A mockup is a middle to high fidelity, static, design representation. Very often a mockup is a visual design draft, or even the actual visual design. A well created mockup:– represents the structure of information, visualises the content and demonstrates the basic functionalities in a static way– encourages people to actually review the visual side of the project
USER PROFILES AND PERSONAS
A persona is a fictitious identity that reflects one of the user groups for whom you are designing.
Personas need to be informed by research to be useful. It can be tempting to put on your creative writing hat and invent details to make them believable or interesting. However, the goal should be to have your personas reflect patterns that you’ve identified in your users (or prospective users).
There’s no shortcut for identifying these patterns—they come from user research: conduct-ing interviews, surveys, user testing, contextual inquiry and other activities.
Knowing your audience is the first step in UX design and enables you to develop experi-ences that reflect the voice and emotions of your users. Personas can be developed using website data.
SCENARIOS AND STORYBOARDS
A scenario is a narrative describing “a day in the life of” one of your personas, including how your website or app fits into their lives. If you’re familiar with writing user stories in an agile environment, you’ll be comfortable writing scenarios—although the focus here is on regular usage, not edge cases.
Depending on the audience, a storyboard may be a more appropriate tool for capturing how, when, where and why someone might use your product.
Inspired by the filmmaking industry, a storyboard is a visual sequence of events used to capture a user’s interactions with a product.
It may be an extremely rough sketch—purely for crystallising your own ideas—or a more polished comic for engaging your audience more e�ectively.
By engaging the emotions of users and drawing on familiar elements, UX designers tell stories and teach information. Learn more about the value of storytelling in the context of UX in the two-part post “Better User Experience With Storytelling.”
USER FLOWSDesigning how users should move through a system is another popular deliverable.
ScenariosScenario 1:User opens a browser on a Unix machine with single interface from a wired network User will go through steps 1) -> 1b) -> 2) -> 4) -> 5a) -> 5b) -> 5c) -> 6) -> 7a) i) -> 8) in the flow chart above
Scenario 2:User opens a browser on a Unix machine with single interface from a wireless network User will go through steps 1) -> 1c) -> 1b) -> 2) -> 4) -> 5a) -> 5b) -> 5c) -> 6) -> 7a) ii) -> 8) in the flow chart above
Scenario 3:User opens a browser on a PC/Mac machine with single interface from a wired network User will go through steps 1) -> 1b) -> 2) -> 4) -> 5a) -> 5b) -> 5c) -> 6) -> 7b) i) -> 9) -> 10) -> 11) -> 12) -> 13) a) i) in the flow chart above
Scenario 4:User opens a browser on a PC/Mac machine with single interface from a wireless network User will go through steps 1) -> 1c) -> 1b) -> 2) -> 4) -> 5a) -> 5b) -> 5c) -> 6) -> 7b) i) -> 9) -> 10) -> 11) -> 12) -> 13) b) i) in the flow chart above
http://web.stanford.edu/dept/its/projects/hostreg/docs/software-design/usecase.html
USER TESTING
Sitting users in front of your website or app and asking them to perform tasks you’ve planned for them while they think out loud is the fundamental premise of user testing.
How many test participants you involve, how closely your test participants match your actual users, and how many iterations of testing you run are all decisions shaped by budget and time constraints.
User testing is straightforward enough that anyone can—and should—experience running one. Being in the same room while someone struggles to use your product is a powerful trigger for creating empathy with users—a common trait.
A/B TESTING
A UX specialist might devise a study to compare the e�ectiveness and quality of experience of di�erent user interfaces.
This is done by stating a hypothesis (e.g. “A green button is more attractive than a red button.”), proposing or creating multiple versions of a design, defining what a “better experience” means (e.g. “The green button is better because users clicked it more.”) and then conducting the test.
A/B testing (also known as split testing or multivariate testing) compares di�erent versions of a page, and it can be conducted with any of several programs.
Basically, A/B testing software splits a website’s tra�c into two equal segments. One group sees version A, and the other group sees version B. Statistics such as conversion rate and bounce rate are tracked for each version. Split testing deter-mines which version is better based on these statistics. One of the most popular applications for A/B testing is Google’s Website Optimizer.
PRACTICE 01
บอก User Flow ของการเปนลูกคารานกวยเตี๋ยวเนื้อยานสีลม
USER FLOWมาถึงที่ราน
มีโตะวาง ไมมีโตะวาง
รอ ไมอยากรอ เลยไปรานอื่น
รอพนักงานมารับออเดอร
รอนาน เปลี่ยนใจไมทานแลว
ไดรับเมนู
สั่งอาหาร
ไมมีอะไรนาทาน ไมทานรานนี้
รออาหาร
รอนานเกินไป ขอยกเลิกการสั่ง เดินออกจากราน
ไดรับอาหาร
ตอคิวนาน เปลี่ยนใจไมทาน
สั่งเพิ่ม หรือสั่งกลับบาน
เช็คบิล
รอเช็คบิล
จายเงิน
รอเงินทอน
เสร็จสิ้นกระบวนการ
การรอการตองตัดสินใจBad UX
การปรับปรุงใหลูกคาไดรูสึกพึงพอใจมากขึ้นการรอคอยโตะการมีพนักงานตอนรับ คอยยิ้มแยม จดคิว และบอกวา “รอไมนานหรอกคะ” “สั่งอาหารกอนไดนะคะ พรอมยื่นเมนู และรอจดรายการ”การมีเครื่องกดบัตรคิวการขยายรานใหมีโตะมากขึ้น
การรอพนักงานรับออเดอรการบริหารจัดการ แยกพนักงานเสิรฟ กับพนักงานที่มีหนาที่จัดการกับออเดอรใหลูกคาจดเอง มีแบบฟอรมให มี iPad ใหสั่งอาหารเอง
การรออาหารการบริหารจัดการเรื่องการทำอาหาร เพื่อใหไดอาหารอยางรวดเร็ว
การรอการคิดเงินการบริหารจัดการเรื่องแคชเชียร
ดูเมนูแลวไมมีอะไรที่อยากทานหรือเห็นราคาอาหารแลวเปลี่ยนใจวางเมนูอยูหนาราน ใหรูวามีอะไรมีอาหารใหหลากหลายเขียนราคาชัดเจน พรอมโปรโมชั่น
การรอการคิดเงิน
ดูเมนูแลวไมมีอะไรที่อยากทานหรือเห็นราคาอาหารแลวเปลี่ยนใจ
PRACTICE 02โรงเรียนกวดวิชาสำหรับเด็กเขามหาวิทยาลัยอินเตอร
ดิฉันตองการทำเว็บไซตคะอยากใหดูไดบนมือถือดวย อยากใหเว็บไซตมีขอมูลครบถวน
ลดการตอบคำถามทางโทรศัพทของเซลล เพราะเซลลก็ตองตอนรับผูปกครองที่มาที่ รร.อาจจะไมมีเวลารับโทรศัพททุกสาย
มีตารางเรียนใหดาวนโหลดทุกคอรส คอรสเรามี 11 คอรสเรียน
อยากใหแสดงโปรโมชั่นของแตละคอรสมีขาวการศึกษา การจัดกิจกรรม มีการแสดงแผนที่ เบอรติดตอ ไลน
แสดงวาเด็กไดคะแนนดี ใหเห็นวาครูเราเกงดวยเด็กของเรา เราเนนเด็กที่จะเขาจุฬา ธรรมศาสตร และมหิดลเปนหลัก
เรามี personal coach เพื่อใหคำแนะนำเด็กโดยเฉพาะ ดูแลดี
START WITH PERSONASSitting users in front of your website or app and asking them to perform tasks you’ve planned for them while they think out loud is the fundamental premise of user testing.
How many test participants you involve, how closely your test participants match your actual users, and how many iterations of testing you run are all decisions shaped by budget and time constraints.
User testing is straightforward enough that anyone can—and should—experience running one. Being in the same room while someone struggles to use your product is a powerful trigger for creating empathy with users—a common trait.
Once you have created your personas, use their goals personas to identify the product functionality. Ask yourself what the product should do to address the personas’ problems or to create the desired benefits for them, as the left picture shows.
http://www.romanpichler.com/blog/personas-epics-user-stories/
PERSONAS
เด็กโรงเรียนอินเตอร เด็กนอก เด็กนักเรียนไทย ผูปกครอง
ดูแตซีรียฝรั่งพูดภาษาอังกฤษไปเมืองนอกบอยๆปารตี้บานเพื่อนอยากไดวุฒิ ม.6 (GED)
ตองการมาเรียนมหาวิทยาลัยในเมืองไทยมาจากออสเตรเลียอินเดีย สิงคโปรอเมริกา
อยากเขาเรียนในระบบอินเตอรภาษาอังกฤษพอใชเลขเกงเดินหาง เลนเกม
คนหาสิ่งที่ดีที่สุดใหกับลูกตามใจลูกทำงานหนัก ไมคอยมีเวลา
SCENARIOS
นองเนยนักเรียนโรงเรียน Harrowอายุ 16 ปครอบครัวอบอุน ฐานะดีใชเว็บไซตเพื่อเลนโซเชียล บันเทิง การเรียนใช iPhone, iPad, MacBook Airเลนกีฬา เทนนิส วายน้ำ ขี่มา
SCENARIOS
DRAW THE SITEMAP
SITEMAPHOME
CHULA THAMMASAT MAHIDOL COURSES NEWS WHO WE ARE CONTACT US
FACULTIES
FACULTY INFO
Link to courses
FACULTIES
FACULTY INFO
Link to courses
FACULTIES
FACULTY INFO
Link to courses
COURSES LIST
GED
- Course Detail- Timetable to download- Promotion- Related News & Events
NEWS & EVENT LIST
ARTICLE PAGE
- Story- Teachers- Personal Coach- Videos- Gallery
- Google Maps- Contact Detail- Personal Coach- Form
STUDENTS
- CATEGORIES CHULA THAMMASAT MAHIDOL WINNER
STUDENT INFO
IGCSE
- Course Detail- Timetable to download- Promotion- Related News & Events
IELTS
- Course Detail- Timetable to download- Promotion- Related News & Events
and more
SKETCH FIRST PAGE WIREFRAME
FIRST PAGE WIREFRAME
HOME CHULA THAMMASAT MAHIDOL COURSES NEWS STUDENT WHO WE ARE CONTACT US
LINE @houseofgriffin Social Media Icons
LOGO
Carousel
Chula Thammasat Mahidol
PRE-GED GED
WWW.THESCHOLAR.CO.TH
PEOPLE INVOLVED INBUILDING A WEBSITE
BUSINESS FOLKS AND WEBSITE CLIENTS
PEOPLE INVOLVED IN BUILDING A WEBSITE
Once, you could get away with sticking a website up on the Internet and expect to get reasonable tra�c without much further e�ort. In the crowded Internet highways of today, however, you really need a business strategy and a marketing plan. Your business and marketing folks must be involved with the website from the very beginning. They are in charge of the following responsibilities:
Setting the goals and requirements for the site. You must always understand the business goals, in order of priority, of the site.
Identifying the target customer. The marketing team members should provide a profile picture of the ideal customer that the site must cater to.
Reeling in the visitors. The marketing team also needs to figure out how to direct customers to the site.
PRODUCERS AND PROJECT MANAGERS
Once clients and companies are committed to a new web project, invariably their eyes tend to get bigger than the budget. Often times, they will ask for the moon because they simply do not understand the complexities that go into web development. Among many other responsibilities, the main job of the producer or project manager is to set and manage client expectations so the project stays on track.
INFORMATION ARCHITECTS
This impressive-sounding title goes to the person whose job it is to sit down and figure out how the whole site fits together and how people will navigate from one page to the next.
Among the first tasks of an information architect is to design a sitemap diagram that shows all the main sections of the site. The IA, as this person is often referred to, then dives into the page-level detail and creates a series of wireframe diagrams that show the content and navigational elements that go on each major page of the site.
VISUAL DESIGNERS
Armed with the sitemap and wireframes that define the underlying site structure, it’s the visual designer’s job to extend a company’s brand image and character into a website look and feel. Visual design, however, is not just about making a site look good; it can make or break a site’s e�ectiveness and even its usability. A good visual designer rearranges elements, adjusts relative placement and sizing of elements, and uses good graphic-design principles of color, form, consistency, and layout to accentuate navigation and important content, and indicate how users should interact with each page.
Many print designers who are new to web design create graphically rich, custom interfaces that certainly look cool but aren’t very practical for the web. These sites often download slowly, are hard to automate or update, or are di�cult to use because users can’t easily distin-guish clickable from non-clickable items.
CONTENT DEVELOPERS
For this reason, content development for a web project is often parceled out to two distinct individuals — or one individual wearing two distinct hats:
The content strategist: The person who identifies the chunks of copy needed for each page and the rules for each, such as character limits and style of copy.
The copy writer: The person who actually writes the text for each identified chunk.
WEB DEVELOPERS
A web developer is the person who assembles the actual web pages in HTML (HyperText Markup Language) and CSS (Cascading Style Sheets). There is a real art to producing what is called the front end of a website (what you see when you visit a website) because there are so many browsers and computer configurations to account for.
PROGRAMMERS
Modern website projects would not be complete without a team of programmers. These folks can really give your website a turbo boost by making it a powerful business tool, whether it is an e-commerce site or a social networking site.
In addition to coding web-page templates with a scripting language such as PHP or ASP, programmers also create the online databases to house all the information the templates may need. Building databases can be so complex that many times you need a specialized data-base dude or dudette for that task alone.
หากคุณเปนฟรีแลนซ
เจาของกิจการ
นองการตลาด พี่บัญชีเจาของบริษัท
นองการตลาดไดรับคำสั่งใหจัดหาคนมาทำเว็บไซต นองไมมีความรูเรื่องเว็บเลยเจาของบริษัทไมเคยมาดูแล ตรวจสอบ ระหวางขั้นตอน แตพอทำเสร็จแลว ก็จะบอกวาชอบไมชอบอะไรบาง บางทีเอาไปใหเพื่อนดู ก็มีคำแนะนำมาอีก ไมจบสิ้นพี่บัญชีก็ไมจายเงินจนกวาเจาของจะพอใจ
บริษัทเล็กๆ แหงหนึ่ง
มีเงินพรอมจาย แตไมรูเรื่องเทคโนโลยีอินเตอรเนตอะไรเลยรูแตไดยินเขาวากันวา มีเว็บแลวมันดีมีเฟส มีการปกหมุด แลวจะชวยโปรโมทราน
PRACTICE 03ตองการปรับปรุงกระบวนการล็อคอิน
ปรับปรุงการขั้นตอนในการล็อคอิินลองคิดดูวาจะปรับปรุงอะไรไดบาง เพื่อใหผูใชงานใชงาย สะดวก ไมงง
ใหล็อคอินดวย social account ไดดวย
ใหมีความปลอดภัยมากยิ่งขึ้นดวย 2-Step verification
Personas คือทุกเพศ ทุกวัย ทุกอาชีพ
จงคิด USER FLOW มา
LOGIN PAGE
REMEMBER FORGOT USERNAME FORGOT PASSWORD FORGOT EVERYTHING NEW VISITOR
CREATE ACCOUNT
CONFIRM EMAIL
PROFILE PAGE
Basic infoSubscrube newsletter
Input more infoUpload Photo
LANDING PAGE
LOG OUT
INPUT EMAIL ADDRESS
INPUT USERNAME
LOG IN PAGE
CLICK LINK
LANDING PAGE
CLICK LINK
NEW PASSWORD
LOG IN PAGE
LANDING PAGE
EMAILInform the passwordor a link to create new one
Informusername
Invite to create new account
FIRST IDEA
หนาล็อคอิน เมื่อกรอกอีเมลผิด และอีเมลนี้ไมมีในระบบจะพาไปยังหนาสมัครสมาชิกทันที
REFERENCES
Thank you illustrations from www.freepik.com
Contenthttp://uxmastery.com/7-signs-person-isnt-actually-ux-designerhttps://www.sitepoint.com/ux-designer-actually/http://www.romanpichler.com/blog/personas-epics-user-stories
Download wireframe templates PDFhttps://drive.google.com/drive/folders/0B3_0TvLYb2PadkJ3eFM0N3ZNcE0?usp=sharing
RECOMMENDED
