“NHẬP MÔN” UI/UX TẠI THEGIOIDIDONG.COM Buổi chia sẻ dành cho nhóm IT (phần 1/3) @ Etown 2, TP HCM ngày 4/12/2015 Người chia sẻ: Tùng Jacob Đây là ai? App TGDD 

Ai đang “chém” • Thanh Tùng (tungjacob), 30 tuổi • UI/UX Designer / Product Manager • [email protected] 2007 SV kinh tế lơ ngơ ra trường 2007 Baamboo MP3 (VCcorp) Product Exec. 2008 anhso.net (Moore Corp) Product Manager 2010 Web freelancer 11/2011 - hiện tại thegioididong.com dienmayxanh.com (dienmay.com) 

AGENDA • UX là gì, vì sao cần (60p) • Break (5p) • Các nguyên tắc UX/UI cần biết (60p) • Workflow & Tools (30p) 

CÁc điểm cần biết trước khi bắt đầu: • Điện thoại để chế độ Máy bay/Rung • Không mở điện thoại khi ở trong phòng, cần nghe ra ngoài • Đừng ngắt lời người đang nói, hãy giơ tay trước khi bạn muốn nói/đặt câu hỏi • Nội dung bài chia sẻ có sử dụng cả tiếng Việt + tiếng Anh vì lý do khách quan (dịch thì không nguyên vẹn ý/nghe xa lạ). Rất mong các bạn thông cảm. 

Một mẹo để giúp bạn lắng nghe hiệu quả hơn ở buổi chia sẻ nÀy (cũng sẽ giúp Designer vÀ Developer lÀm việc với nhau “dễ chịu” hơn) GIVE IT 5 MINUTES https://signalvnoise.com/posts/3124-give-it-five-minutes Hãy dành 5 phút suy nghĩ về một điều người khác vừa nói (nhất là khi quan điểm đó trái chiều quan điểm của bạn) trước khi phản biện lại. Điều đó sẽ giúp bạn “learn something”, thay vì “try to prove something” (cố gắng chứng minh điều gì đó). “Richard has spent his career thinking about these problems. He’s given it 30 years. And I gave it just a few minutes. Now, certainly he can be wrong and I could be right, but it’s better to think deeply about something first before being so certain you’re right.” 

Bắt đầu: Các bạn mong đợi điều gì ở buổi chia sẻ này 

VÌ SAO CẦN MỘT BUỔI CHIA SẺ THẾ NÀY CHO CÁC LẬP TRÌNH VIÊN “Sâu thẳm bên trong mỗi nhà phát triển phần mềm, có một nhà thiết kế đồ họa vừa chớm nở chờ đợi để có cơ hội được bộc lộ ra ngoài” Jeff Atwood - Founder StackOverFlow.com 

– vẫn là Jeff Atwood - Founder StackOverFlow.com “… VÀ nếu bạn để cho điều đó xảy ra, bạn sẽ gặp thảm họa. Hoặc ít nhất lÀ người dùng của bạn sẽ gặp rắc rối to.” 

Giao diện một hộp thoại ‘đơn giản’ do lập trình viên tạo ra! (source: http://vinacode.net/2015/11/04/lap-trinh-vien-tao-giao-dien-nguoi-dung/) 

(source: http://vinacode.net/2015/11/04/lap-trinh-vien-tao-giao-dien-nguoi-dung/) 

TẠI SAO MỌI DEVELOPER CẦN HỌC UI/UX UI (User Interface): Giao diện người dùng UX (User Experience): Trải nghiệm người dùng 

I. LẬP TRÌNH VIÊN THUẦN CODE CÓ CẦN QUAN TÂM ĐẾN UI/UX HAY KHÔNG? Chắc chắn là có. Các bạn lập trình viên trẻ hoặc quen làm bên outsource thường rơi vào cái bẫy là code sao cho sp chạy được thôi. Bạn coder sử dụng được thì cho rằng user nghiễm nhiên cũng sử dụng được. (designer và PM nhiều khi cũng gặp phải tình trạng này, design xong tưởng user sẽ dùng đc) Cái bẫy ở chỗ bạn là người code từng dòng của product đó, dĩ nhiên bạn sử dụng được tốt. Nhưng nếu cho 1 user ở bên ngoài vào thử, mọi chuyện sẽ hoàn toàn khác. 1 sản phẩm tốt không phải chỉ tốt ở khâu code, mà còn phải hoàn chỉnh cả UI/UX. 

II. KHÔNG HIỂU BIẾT VỀ UI/UX ẢNH HƯỞNG NHƯ THẾ NÀO ĐẾN CÔNG VIỆC LẬP TRÌNH? Một ví dụ rất hay xảy ra là khi các bạn designer làm xong phần design, đưa cho coder thì bạn coder hay comment là design như thế này khó quá, không thể làm được và yêu cầu thay đổi design để code dễ hơn Tuy nhiên, không phải cứ dễ code hơn là hay hơn. Vì bạn coder không hiểu về UI/UX nên không hiểu vì sao design nó cần như thế, gây ảnh hưởng đến trải nghiệm người dùng 

III. VẬY NẾU BIẾT VỀ UI/UX SẼ CÓ LỢI NHƯ THẾ NÀO CHO DEVELOPER? Nó sẽ giúp bạn suy nghĩ theo hướng làm thế nào để user dễ sử dụng nhất, từ đó làm chủ sản phẩm. Coder phải hiểu và làm chủ sản phẩm thì cái anh ta code ra mới chất lượng được. Điều này là rất quan trọng cho mọi developer muốn phát triển lên. 

Dev mới Dev leader Product Executive Product Manager Web Designer UX designer Product Owner UX master/Hiểu sâu về user, chịu trách nhiệm cuối cùng về sản phẩm Lập trình viên, designer hay một người làm sản phẩm đều có thể trở thành: 

No content

Quy trình thiết kế đặt người dùng làm trọng tâm trong mọi quyết định: Lập kế hoạch - nghiên cứu - thiết kế - điều chỉnh - đo lường hiệu quả để cải thiện 

No content

No content

Các cảm xúc tiêu cực 

Các cảm xúc tích cực 

Để đánh giá được trải nghiệm đó có tốt hay không thì phải dựa vào hai tiêu chí: 1. Người dùng có thể làm việc mình muốn một cách hiệu quả: Những việc người dùng phải làm có rõ ràng không? Những việc đó thường tốn bao nhiêu thời gian? Tỉ lệ bao nhiêu người hoàn thành việc đó? Cần qua bao nhiêu tap hay click? Những chức năng mới có dễ hiểu và dễ ghi nhớ không? 2. Người dùng cảm thấy hài lòng về trải nghiệm: Hiệu quả chỉ là một phần của bức tranh về trải nghiệm. Ngoài hiệu quả và usability (tính khả dụng), mọi trải nghiệm đều tạo nên một cảm xúc gì đó cho người dùng. Những cảm xúc tốt có thể là vui khi có thể hoàn thành công việc nhanh chóng hoặc tự tin vì những người dùng khác thích profile hay sản phẩm của mình. Những cảm xúc không tốt có thể là sự bực mình vì không biết phải click vào gì, đi đâu tiếp theo 

No content

Nguyên tắc KISS: Keep it simple stupid (làm cho mọi thứ ko thể đơn giản hơn) 

Phương chÂm lÀm việc của UX Designer Người làm UX có trách nhiệm với cả hai bên: người dùng và công ty phát triển sản phẩm. Hai trách nhiệm này của người UX Designer không bao giờ được tách rời. 

Phương chÂm lÀm việc của UX Designer • Đối với người dùng: UX Designer phải hiểu những suy nghĩ và giả định của mình luôn là góc nhìn chủ quan và không nhất thiết phản ánh đúng cách nhìn của người dùng sản phẩm. Những thiết kế của người UX Designer luôn được hướng dẫn bởi người dùng, với từng feature và yếu tố giao diện được đặt vào đều với mục tiêu rõ ràng và liên quan đến nhu cầu của người dùng. Khi có một insight hay giả thuyết nào đó, người UX Designer sẽ muốn thử nghiệm để kiểm chứng giả thuyết của mình chứ không lập tức chấp nhận nó. Bảng lấy ý kiến các team để xây dựng User Story theo phương pháp Agile Scrum 

No content

Phương chÂm lÀm việc của UX Designer • Đối với người dùng: UX Designer phải hiểu những suy nghĩ và giả định của mình luôn là góc nhìn chủ quan và không nhất thiết phản ánh đúng cách nhìn của người dùng sản phẩm. Những thiết kế của người UX Designer luôn được hướng dẫn bởi người dùng, với từng feature và yếu tố giao diện được đặt vào đều với mục tiêu rõ ràng và liên quan đến nhu cầu của người dùng. Khi có một insight hay giả thuyết nào đó, người UX Designer sẽ muốn thử nghiệm để kiểm chứng giả thuyết của mình chứ không lập tức chấp nhận nó. • Từ nền tảng tâm lý học, người UX Designer cũng phải hiểu được người dùng không thật sự hiểu chính bản thân họ, và vì thế mà sẽ không bao giờ ngay lập tức chấp nhận những ý kiến của người dùng như là một chân lý tối cao. Nhìn chung, không có một công thức nào để nói rằng lúc nào bạn có thể tin tưởng người dùng và thật sự họ muốn cái quái gì, điều này phụ thuộc nhiều vào kinh nghiệm cũng như sự sâu sắc của chính UX Designer. 

Phương chÂm lÀm việc của UX Designer • Đối với công ty phát triển sản phẩm: nói rằng đặt người dùng lên hàng đầu, nhưng mục tiêu của UX Designer vẫn là giúp công ty đạt mục tiêu kinh doanh. Dung hòa được nhu cầu của người dùng và mục tiêu của chính sản phẩm không phải là vấn đề đơn giản. Về lâu dài những gì là tốt nhất cho khách hàng cũng là tốt nhất cho doanh nghiệp. Tuy nhiên, trong ngắn hạn, đôi lúc bạn sẽ phải đánh đổi giữa việc làm hài lòng người dùng và hiệu quả kinh doanh (trade-off). Đây cũng là một trong những quyết định khó khăn ngay cả với những Designer dày dạn kinh nghiệm. 

VD về việc trade-off: Box promote việc bán sim nằm ở bước 2 của luồng checkout. Nếu xét về UX (trải nghiệm người dùng) thì việc này chưa (chắc) thật sự tốt vì nó ảnh hưởng đến user (làm họ phân tâm trong quá trình mua), nhưng đứng ở góc nhìn Business thì việc này có thể mang lại một phần doanh thu --> trường hợp này chọn làm nhưng sẽ phải đi kèm với đo lường. Nếu ko phát sinh doanh thu thì có thể sẽ bỏ 

Người như thế nÀo thì thích hợp để trở thÀnh UX Designer? Tố chất: • Sự đồng cảm • Sự khiêm tốn • Không phán xét • Sự quan sát và tò mò về mọi thứ xung quanh • Chú ý đến chi tiết (attention to detail): họ thường thấy được những chi tiết nhỏ nhoi ảnh hưởng đến mọi người như thế nào, và hiểu được những thay đổi nhỏ cũng có thể tạo nên ảnh hưởng lớn. Kỹ năng: • Kỹ năng giao tiếp • Hiểu biết về tâm lý học • Kỹ năng thuyết phục • Kỹ năng thấu hiểu vấn đề • Kỹ năng thiết kế và prototype • Kỹ năng phân tích dữ liệu kết hợp tư duy sáng tạo • Hiểu biết căn bản về kỹ thuật: Nếu bạn có background kỹ thuật rất có ích, khi bạn hiểu những khả năng và giới hạn của công nghệ để xây dựng những giải pháp tốt. 

CHÚ Ý ĐẾN CHI TIẾT LÀ THẾ NÀO Google Chrome - Displays some search results in the suggested input area More: http://littlebigdetails.com/ 

–Tùng Jacob “Tính cầu toÀn vÀ chú ý đến từng chi tiết nhỏ lÀ một phẩm chất quan trọng của người lÀm UX” 

Tảng băng tượng trưng cho tất cả cÁc vấn đề chưa okie trên một trang web Phần nổi: Lỗi sai chính tả, font chữ, xô lệch layout, không click được….Phần lớn các bạn nhìn ra đc các vấn đề này Phần chìm: Các lỗi/vấn đề khó phát hiện hoặc hiếm gặp: - Chi tiết nhỏ nhưng ảnh hưởng lớn - Lỗi logic hiển thị - Lỗi viết nội dung chưa đủ “lúa” - (Ko phải lỗi) Các chi tiết có thể tối ưu để làm cho KH wow “Tuyệt quá” Deeper UX (UX ở tầng sâu): để có thể phát hiện ra các vấn đề này, bạn cần là một user cầu toàn + khó tính + cần tập luyện hàng ngày để có đc sự nhạy bén đó 

ATTENTION TO DETAIL TEST Bên phải là screenshot Homepage của 1 ứng dụng về tổng hợp các voucher. Hãy tìm các lỗi UI/UX có trong hình này Source: http://blog.siliconstraits.vn/chieu-mo-nhan-tai-linh-vuc-quality-assurance/ 


 11 lỗi có trong hình bao gồm: 1+2. Icon Setting và Back trên Navigation Bar bị đổi vị trí. 3. Tiêu đề “Food & Bevegare” trên Navigation Bar bị lệch. 4. Ô Search nhưng lại để icon “Time”. 5. Lề dưới của hình bên phải bị lệch. 6. Font của 2 tiêu đề voucher khác nhau. 7. Icon Location và Time bị đổi vị trí. 8. Màu đen phần nhấn mạnh của 2 voucher khác sắc độ nhau. 9. Phần Time của voucher bên phải Align bị lệch. 10. Đang ở trang Home nhưng tab lại ở Setting. Ngoài ra, có tới 2 nút Setting trên màn hình, dư 1 nút. 11. Tiêu đề voucher bên trái Align bị lệch. BÀI TEST (SAI) ĐÁP ÁN (ĐÚNG) 

“Vấn đề thường hay gặp nhất về UI (Giao diện) đó lÀ lập trình viên chỉ code được đúng 50 - 60% so với yêu cầu thiết kế. CÁc lỗi thường gặp lÀ: sai / thiếu cÂu từ, mà mÀu; tự chế font size, không đủ padding/margin, thiếu hiệu ứng hover… ” 

CÁC NGUYÊN NHÂN CHÍNH • Khách quan: ông PM/Designer/PTBH làm hời hợt, thiếu mô tả, thiết kế thiếu/chưa lường hết ngữ cảnh. Thiếu kick off hoặc sự giao tiếp trực tiếp, tam sao thất bản do sử dụng Chat • Chủ quan: không đọc (kỹ) tài liệu bên PM gửi, code chỉ dựa trên thiết kế mà làm. • Tự ý điều chỉnh/thay đổi một số thành phần bằng giải pháp khác (dễ làm hơn để tiết kiệm thời gian) • Chưa có mindset Pixel perfection, tâm lý "còn test nữa mà, mấy cái lặt vặt để sau cũng được/chờ tụi kia báo rồi sửa, giờ làm tính năng chính trước đã" • Chưa hiểu là các "Little big details" có ảnh hưởng thế nào đến UX 

No content

Các nguyên tắc UX/UI cần biết tại TGDD 

CÁC NGUYÊN TẮC UX • Don’t make me think - “LÚA HOÁ” • Don’t waste my time • Website should explain themselves • Keep it simple Stupid (Less is more) • Mobile First 

DON’T MAKE ME THINK Đây là một cuốn sách hay về UX dành cho người mới bắt đầu 

Bạn có đoán được các icon này có nghĩa là gì? 

No content

DON’T WASTE MY TIME 

User mất thời gian đi tìm thông tin cho các câu hỏi như: Có bảo hành đổi trả không, nguồn gốc xuất xứ sản phẩm, giao hàng thế nào 

Vậy tóm lại trả góp bao nhiêu 1 tháng và cần thủ tục gì Không có email thì làm thế nào 2 cổng thanh toán trực tuyến này có gì khác nhau không nhỉ Nhận hàng tại siêu thị thì có cần địa chỉ nhà không? 

WEBSITE SHOULD EXPLAIN THEMSELVES 

Hỏi mẹ bạn: Làm sao để gửi hình kèm với bình luận FB messenger Zalo TGDD 

Chú ý chỉnh từng câu từ cho thật dễ hiểu và đủ thông tin để user ra quyết định (Copywriting matters) • Các thông tin về chính sách sản phẩm, mua hàng • Form mua hàng và trang Checkout 

No content

No content

KISS KEEP IT SIMPLE STUPID 

Before After 

No content

Summary • Đừng bắt người dùng phải nghĩ (Lúa hoá) • Đừng làm họ mất nhiều thời gian (tìm thông tin, mua hàng, tạo tài khoản) • Thông tin và các tác vụ trên web nhìn một cái là biết ý nghĩa của việc nó “đến trái đất là gì” • Đơn giản hoá mọi thứ, từng ngày • Giao diện Mobile là ưu tiên số 1, Desktop số 2 

CÁC NGUYÊN TẮC UI Make a good UI 

“Typography chiếm đến 95% trong thiết kế website. Nó lÀ những gì người dùng đọc vÀ tiếp nhận thông tin từ những nội dung họ nhìn thấy.” http://www.uxd.vn/10-meo-nho-huu-dung-trong-thiet-ke-danh-cho-startups/ 

No content

No content

No content

No content

No content

No content

No content

No content

No content

No content

No content

No content

No content

No content

No content

No content

No content

No content

No content