Sau bao ngày bế quan tu luyện, ngâm cứu tài liệu và tự tìm hiểu về UX/UI (User Experience và User Interface), mình cũng có một số lượng kiến thức đủ dùng để chia sẻ.
Vốn dĩ mình định đợi tới khi thật sự Master về UI/UX thì mới bắt đầu viết, nhưng nghĩ lại chắc chẳng bao giờ Master nổi đâu, nên viết ra để vừa chia sẻ kiến thức vừa ôn lại vậy.
Hi vọng các bạn đọc tiếp tục ủng hộ series này như đã ủng hộ các series trước: C# hay ho, JavaScript sida, Bảo Mật Nhập Môn, … nhé.
Tại sao developer cũng nên biết về UI/UX?
Nhiều bạn nghĩ là, developer thì cần quái gì phải biết về UI/UX?
Thật ra điều này cũng đúng, nếu bạn làm lập trình nhúng, hoặc chuyên sâu về back-end, series này sẽ không giúp ích mấy cho bạn. Tuy nhiên, nếu bạn là web developer (đặc biệt là front-end), hoặc mobile-app developer, đừng bỏ lỡ series này nhé!
Mình đã từng chia sẻ về vấn đề này qua bài viết: Kĩ thuật design cơ bản cho developer. Công việc thiết kế thường là việc của designer. Trong các công ty lớn, có qui trình rõ ràng, thường team sẽ có designer và BA riêng. (Hồi làm việc tại FSoft, mình đã có file PSD và mô tả sẵn, cữ cắm đầu mà code thôi).
Tuy nhiên không phải công ty nào cũng có designer, và đôi khi designer cũng chỉ thiết kế ra cái giao diện xong và… vứt đấy, mọi thứ bạn sẽ phải làm!
Không nói đâu xa, mình từng nhận một cái design khá “nham nhở” thế này từ designer
Ví dụ như, thuở làm việc ở ASWIG, mình bị giao nhiệm vụ thiết kế prorotype, lúc đó mới biết kiến thức về design và UX quan trọng tới mức nào.
Hiện tại, mình đang làm việc ở ISS,mình chịu trách nhiệm từ thiết kế UI, flow chương trình cho tới viết code và API. Mặc dù team có UI/UX designer riêng, mình vẫn phải biết về UI/UX, đồng thời thảo luận và làm việc trực tiếp với designer.
Do vậy, mình khuyên các bạn nên tìm hiểu về UI/UX, không ít thì nhiều, chúng cũng sẽ có ích cho sự nghiệp của các bạn.
UX, UI và tầm quan trọng của chúng
UI và UX là hai thứ khác nhau và thường bị lẫn lộn với nhau. Thật ra, UI chỉ là một phần nhỏ của UX.
Tuy nhiên, đã nhắc đến UX thì phải nhắc đến UI, vì cảm nhận của người dùng là thông qua UI. UI sẽ gián tiếp quyết định UX tốt hay không tốt (Sẽ giải thích rõ ràng vào những bài sau).
UX tốt là vô cùng cần thiết cho các ứng dụng web, mobile, nhất là các sản phẩm start-up. Hai ứng dụng có chức năng như nhau, ứng dụng nào UX tốt hơn sẽ được ưa thích hơn, nhiều người sử dụng hơn (Không tính các yếu tố như marketing v…v nhé).
Không chỉ vậy, UX còn quan trọng hơn bạn nghĩ nhiều. Đã từng có nhiều sự việc “chết người” liên quan đến UX, UI quá tệ:
- https://blog.martindoms.com/2011/01/24/poor-ui-design-can-kill
- https://medium.com/tragic-design/how-bad-ux-killed-jenny-ef915419879e#.2lwd8yofr
Thiết kế UX bàn điều khiển tệ đã gây ra một vụ tai nạn, làm 87 người trên chiếc máy bay này tử nạn
Hiện tại, theo phong trào người người nhà nhà startup, số lượng công ty startup ngày một nhiều. Kĩ năng về UI/UX cũng sẽ giúp ích bạn rất nhiều khi tham gia các startup này nhé!
Các mảng nhánh của UX
Bản thân ngành nghiên cứu User Experience rất phức tạp. Nó là tập hợp của khá nhiều chuyên ngành khác nhau: HCI (Human Computer Interactction), Tâm lý học, User Research, Visual Design, Interaction Design.
Vì vậy, chúng ta nên nắm bức tranh tổng thể về ngành UI/UX, sao đó dần đào sâu vào từng khía cạnh riêng biệt. Nói một cách tổng quan, hiện tại công việc trong mảng UX được chia làm 2 hướng chính:
UX Research
- Nghiên cứu người dùng và hành vi của họ(Persona, Journey Map)
- Thu thập dữ liệu bằng cách phỏng vấn, tìm hiểu nhu cầu, mục đích của user
- Thực hiện A/B Testing hoặc Usability Testing để đánh giá UI/UX
UX Design
- Interative Design: Design workflow, animation, flow hoạt động của một ứng dụng ra sao
- Information Architecture: thiết kế kiến trúc thông tin, quan hệ giữa các trang trong một hệ thống.
- Visual Design (Màu sắc, font, branding, style guide)
- UI Design (layout, component)
Bức tranh tổng thể về UX Design
Hai mảng này luôn song hành với nhau:
- Trước khi design thì phải thực hiện research để biết người dùng là ai, cần gì
- Dựa theo thông tin có được từ research để thực hiện design
- Design xong lại phải research để kiểm tra lại tìm lỗi, xem người dùng có sử dụng được ko, xem thiết kế có hiệu quả hay không.
Series này sẽ tập trung nói nhiều về mảng UX Design. Mảng UX Research mình chỉ tìm hiểu sơ và chưa áp dụng nhiều vào thực tế, nên chỉ chia sẻ một số lý thuyết thôi nhé!
Giới thiệu và tóm tắt series
Chúng ta sẽ không tìm hiểu những vấn đề kiểu như: Chọn màu gì cho đẹp, ảnh để đâu cho cuốn hút, font gì nổi bật, animation ra sao… Mấy cái này nghiêng về Visual Design, cần đầu óc thẩm mĩ mà mình chắc dân developer tụi mình ít có.
Ngược lại, mình tiếp cận vấn đề theo hướng Interaction Design, những vấn đề chúng ta có thể giải quyết là:
- Sắp xếp layout thế nào để hiển thị dữ liệu với đủ thông tin cần thiết?
- Làm sao để sản phẩm dễ sử dụng, người dùng không cần suy nghĩ nhiều?
- Flow thế nào để người dùng hoàn thành công việc nhanh chóng?
- Lựa chọn control gì cho phù hợp?
Tại sao lại gọi tên series là Hack Não Người Dùng? Ở đây, chúng ta xem não bộ người dùng là một cỗ máy, với các API có sẵn. Hack não ở đây là hack vào não bộ người dùng, khai thác những “lỗ hổng” trong các API của não, nhằm cung cấp cho họ trải nghiệm tốt nhất.
Áp dụng các nguyên lý UI/UX để “hack não” người dùng nhé
Tóm tắt series:
- Phân biệt sự khác nhau giữa UI và UX
- Các tài liệu/khoá học cho việc tự học UI/UX
- Phân biệt UX Research và UX Design
- UX Research tool: persona, interview, scenario
- UX Design Tool: sketch, mockup, prototype
- Nguyên lý design UI cơ bản và áp dụng (Proximity, color, group, alignment, whitespace)
- Nguyên lý design UX cơ bản và áp dụng (Low cognitive, track status, progressive, leading, gamification)
- Design process: Quy trình thiết kế UI/UX. Đây là process mình được học “ké” với các bạn Designer. Mình áp dụng thử và thấy nó có vẻ khá hữu dụng.
- Làm sao test UX: Code thì phải test mới biết chạy đúng hay sai. Thế nhưng làm sao chúng ta có thể test UX/UI để xem nó có hiệu quả hay ko?
- Mổ xẻ phân tích UX/UI của một số vật dụng
- Mổ xẻ phân tích UX/UI của một số trang web và ứng dụng
- Research, thiết kế một dự án từ đầu đến cuối
Đôi lời nhắn nhủ
Nếu muốn đi sâu vào ngành này, bạn nên tìm học kiến thức cơ bản về design và tâm lý học (Từ sách vở, studio, đại học, v..v..). Tài liệu về UX trên mạng cũng có rất nhiều (Sẽ giới thiệu ở bài sau).
UI/UX là một lĩnh vực rất rộng lớn. Cũng như lập trình, không phải cứ đọc vô số sách lập trình và xem vài khoá học là bạn code giỏi được. Design cũng thế, học hỏi và tích luỹ kinh nghiệm dần dần, sau đó áp dụng chúng vào thực tế thì bạn mới tiến bộ được.
Điều quan trọng nhất để design tốt là: Học hỏi và quan sát design mọi lúc mọi nơi. Những đồ vật bạn dùng (laptop, phone) cho tới ứng dụng (web, mobile) đều là sản phẩm design. Hãy nhìn và học hỏi những design tốt/xấu từ chúng, sau đó tự áp dụng vào thiết kế.
Macbook Pro thần thánh đẹp từ UI tới UX
Bản thân mình, mỗi lần dùng một app hay web nào đó, mình vừa dùng vừa đánh giá: thằng này UX hay vãi; hoặc, thằng này UX như sh*t. Việc vừa dùng, vừa đánh giá, vừa học hỏi như vậy sẽ rèn luyện cái nhìn và khả năng design của bản thân bạn.
Chúc các bạn may mắn, nếu chưa like fanpage thì nhớ like fanpage để theo dõi bài viết mới từ series nhé.
Lấy cảm hứng từ một số series:
- Creating User Experiences: Fundamental Design Principles (Giải thích các nguyên lý cơ bản về UI design, nên xem trước tiên)
- Hacking the User Experience / UX for Developer (Thiên về UX)
- UX Tips and Tricks for Developers (Thiên về UI)
- …. và 1 số series về UX khác trên pluralsight
