Treat the client like 2-year-old child

August 20, 2014August 20, 2014 ~ binhtruong ~ Leave a comment

(Mang lại cho khách hàng những thứ đơn giản, dễ hiểu)

(Hình 1: user’s guessing. Nguồn: www.satukyrolainen.com)

Làm việc trong lĩnh vực digital production mà cụ thể hơn là offshore development hay outsourcing thì communication is the key. Mỗi dự án từ lúc lên ý tưởng, cho tới lúc bàn giao sản phẩm cho khách hàng luôn cần giao tiếp liên tục để chắc chắn rằng các bên tham gia hiểu ý nhau. Nghe thì đơn giản, nhưng đây luôn là nguồn gốc của mọi vấn đề. Mà thường là các bên không hiểu nhau. Users không hiểu phần mềm, nghiệp vụ (business process) dẫn đến bực tức và “ghét” phần mềm một cách tự nhiên. Lâu này thành định kiến là “phần mềm khó sử dụng”.

Case study: How to test?

UX xuất hiện khắp mọi nơi, và nói một cách đơn giản là một người có UX mindset sẽ chú trọng vào bất cứ thứ gì mình đưa ra (kể cả là lời nói – UX có dính tới psychology cũng 1 phần là như vậy). Câu truyện của sáng nay rất đơn giản và phổ biến, nhưng tôi ấn tượng với câu nói của boss. Nôm na là như sau:

Boss: Khách hàng muốn test toàn bộ qui trình đăng ký, thanh toán credit card mà ko bị charge phí, nhận email confirmation. Mình có cung cấp được chưa?
PM (Project Manager): Mình đã làm 1 tools migrate khách hàng cũ, với khách hàng mới thì không cần lo vì hệ thống tự generate confirmation code, khách hàng cũ chạy tools, ngoài ra cần migrate data demo sang server staging, làm sạch dữ liệu test, by pass thẻ visa…
Boss: I don’t fucking care. Please treat me like 2-year-old child. Client even likes 1-year-old child. I don’t know and don’t understand whatever you do behind the scenes.
PM: Chúng ta sẽ cung cấp sandbox để test, migrate dữ liệu cần khách hàng confirm migrate những gì, blah blah..
Boss: Những thứ đằng sau đó không cần giải thích với người dùng, đưa cho họ cái họ cần để test được hệ thống như một người dùng cuối (end-user).

Cá nhân mình thấy hợp lý. Bởi đơn giản những thứ kỹ thuật, thiết kế.v.v… là việc của mình, khách hàng thuê mình vì điều đó, còn với họ, họ cần tiếp cận với sản phẩm như một đứa trẻ, tiếp cận và học hỏi, test một cách dễ dàng nhất. Điều muốn nói ở đây là giao tiếp. Communication is the key in UX. Lắng nghe, rồi hiểu đúng cái mà khách hàng cần, đưa cho họ thông tin/câu trả lời đơn giản và dễ hiểu nhất. Họ không quan tâm bạn là ai, thương hiệu của bạn là gì? bạn sử dụng công nghệ gì? All bullshit things. Cái họ cần là vấn đề của họ được giải quyết.

Landing page core elements

September 9, 2013September 9, 2013 ~ binhtruong ~ Leave a comment

05 thành phần cơ bản của một bản thiết kế landing page

(Ảnh: 5 thành phần cơ bản của Landing page, nguồn: tự vẽ tay)

Có nhiều website, blog online nói về các thành phần cơ bản của landing page, cũng như tối ưu hóa bản thiết kế của một landing page. Site thì đưa ra 7 core elements, site thì 5, site thì 10… tôi tóm gọn lại trong 05 yếu tố cơ bản, bởi trong 05 yếu tố này có thể mở rộng với các yếu tố nhỏ hơn, chi tiết hơn. Bài blog này tôi tổng hợp lại từ khóa học trực tuyến “Landing Page Conversion Course” của Oil Gardner.

1. The Unique Selling Proposition (USP)

Yếu tố đầu tiên là USP (Unique Selling Proposition), tạm dịch là lợi thế cạnh tranh tuyệt đối, hay là lợi thế cạnh tranh độc nhất. Khái niệm này không xa lạ với dân sale/marketing hay branding bởi nó xuất phát từ marketing. USB ám chỉ ưu thế bền vững của một thương hiệu hay sản phẩm được xác định với mục đích tạo sự khác biệt rõ rệt, khiến khách hàng quyết định chọn thương hiệu/sản phẩm này thay vì thương hiệu/sản phẩm khác. Ví dụ như với Head & Shoulder (dầu gội): USP là Trị sạch gàu, Domino’s Pizza: USP là Giao hàng bánh nóng hổi trong vòng 30 phút, chậm hơn không tính tiền và với M&M là “chỉ tan trong miệng, không tan trên tay”.

Vậy USP đối với landing page design gồm những gì? Về cơ bản, nó bao gồm 04 thành phần:

The main headline: Đây là dòng tiêu đề đầu tiên (thường được typography chữ to, in đậm) của trang landing page. Mục đích của nó nhằm khẳng định lợi ích mà người dùng có được cũng như khẳng định rằng người dùng đã vào đúng trang web cần thiết. (Đúng nơi, đúng chỗ, đúng mục đích).
The supporting subhead: Giống như “main headline”, supporting headline nhằm mở rộng ý nghĩa của main headline bởi đối với main headline thì text không thể quá dài. Ngoài ra, supporting subhead còn có tác dụng nhấn mạnh lợi ích mà user có thể có được từ landing page của bạn.
The reinforcement statement: Hơi tricky một chút, nhưng thực ra đây là một dạng “second headline” được viết với câu cú khác nhưng cùng ý nghĩa với main headline. Sở dĩ cần re-inforce người dùng bởi họ thường “scan” nội dung của trang web chứ không đọc kỹ. reinforcement statement thường được đặt ở giữa hoặc cuối trang landing page.
The closing argument: Giống như trong bán hàng thông thường, đây là câu để kết thúc quá trình mua bán (closing the sale). Một lần nữa, closing argument thường có dạng thúc giục, nhắc lại những gì mà re-inforce statement đã nhắc tới. Đoạn text này thường đặt cạnh nút bấm call-to-action (CTA).

Một điểm nên lưu ý rằng chúng ta không nhất thiết phải áp dụng USP text một cách máy móc. Các USP text có thể kết hợp với call-to-action để xuất hiện nhiều lần trên một landing page (đặc biệt với landing page có chiều dài hơn một trang màn hình).

(Ảnh: 2 loại landing page phổ biến và cách bố trí các thành phần cơ bản)

2. The hero shot

Hero shot, hiểu nôm na là một bức ảnh (hoặc hình họa) hoặc một đoạn video nhúng (có kích thước 2/3 hoặc 1/2 độ rộng màn hình) vào trang landing page và thường đặt ngày dưới main headline của landing page đó. Mục đích của các hero shot là làm nổi bật nội dung, ý nghĩa của landing page cũng như sản phẩm/ dịch vụ mà người dùng sẽ đạt được. Vì vậy, có thể dễ dàng nhận thấy rằng 03 thành phần main headline, supporting headline và hero shot luôn có sự liên quan chặt chẽ với nhau về thông điệp (text message), bố cục cũng như cách thức trình bày (theo thứ tự, và gần nhau).

Vậy khi nào dùng ảnh? khi nào dùng video?

Khi bán một sản phẩm mà mọi người đều biết đến và đã dùng qua, bạn nên dùng ảnh. Ví dụ khuyến mại mua 3 áo thun tặng 1 áo mưa thì nên design bức ảnh dạng combo cho dễ hiểu. Hoặc landing page giới thiệu thông tin giảm giá vé xem film, vé nhạc kịch cũng thể dùng ảnh chup, posters của show diễn. Ngược lại, những dịch vụ trực tuyến (online service), phần mềm cho thuê (SaaS), các sản phẩm công nghệ mới (unpack technology product) thì nên sử dụng advertising video để tăng phần hấp dẫn và lôi cuốn các khách hàng tiềm năng.

52% of consumers say watching product videos make them more confident in purchase decisions. Shoppers who view product videos are 174% more likely to purchase than visitors that did not. – Unbounce.com

3. The benefits of your offering

Đây là phần liệt kê và mô tả chi tiết những lợi ích từ sản phẩm, dịch vụ của bạn. Ví dụ như: tham gia sự kiện để nhận sách miễn phí, gặp gỡ 5 diễn giả hàng đầu châu Á, trở thành 100 người đầu tiên sử dụng công nghệ context advertising online… Tóm lại, khi bán một sản phẩm / hay dịch vụ nào, thông qua marketing campaign và landing page, bạn phải liệt kê những lợi ích đi kèm bên cạnh giá trị USP của bạn (của công ty bạn).

Benefits ở landing page có thể được trình bày dưới dạng các gạch đầu dòng ngắn gọn (bullets benefit), nhằm giúp người dùng “scan” nhanh chóng, và có thể được thiết kế dạng “chi tiết ngắn gọn” (detail benefit) ở phía dưới landing page giúp người dùng có thể xem kỹ hơn nếu cuộn chuột xuống phần còn lại. Vấn đề ở chỗ, viết như thế nào? và nên viết kiểu gì để đạt hiệu quả tối đa? Theo tôi thì có mấy lưu ý ngắn gọn như sau:

Bullets benefit và detail benefit nên đồng nhất với nhau về nội dung, và detail benefit chỉ nhằm mục đích mở rộng “offering” của bullets benefit.
Tập trung vào việc nhấn mạnh các “benefits” này nhằm “giải quyết vấn đề gì” của khách hàng. Đó mới là điều quan trọng khiến người ta ra quyết định bấm vào nút call-to-action hay không. Ví dụ như: lưu giữ backup email cho bạn, tự động sao lưu contact list, hỗ trợ import vào MS Outlook… có thể là 03 bullets dành cho một dịch vụ online backup email.

Đối với “detail benefit”, có thể sử dụng một số screen shot (nếu sản phẩm bạn kinh doanh là phần mềm dạng SaaS), hoặc ảnh chụp chi tiết từng góc nhỏ của sản phẩm (với những sản phẩm công nghệ khác) đi kèm với mô tả để giúp người dùng dễ dàng ra quyết định hơn.

4. Social proof / Trust indicators

Leverage social proof to make purchasing decisions easier – Oil Gardner

Đây là phần dành cho việc show-off những khách hàng tiêu biểu, những bình luận (tích cực) từ các khách hàng đã và đang sử dụng sản phẩm, dịch vụ của bạn. Việc này bắt nguồn từ lý thuyết bán hàng. Bạn sẽ bán hàng dễ hơn một chút nếu chứng minh được đã có nhiều người tin dùng sản phẩm của bạn. Đối với landing page, phần “proof” thường sử dụng 02 yếu tố chính là:

Big, bold typography text: Những dòng chữ to, in đậm chỉ ra những thống kê về số lượng khách hàng sử dụng sản phẩm/ dịch vụ của bạn. Ví dụ như 2000 khách hàng đã sử dụng sản phẩm trong năm 2013, hoặc hơn 100 khách hàng đã đăng ký mua sách tuần qua.v.v..
Social images, avatar of client/company: Hình ảnh của những khách hàng kèm lời trích dẫn (bình luận) về sản phẩm của bạn. Kèm theo đó là thông tin doanh nghiệp/công ty đã và đang là đối tác của bạn. Ví dụ là chị A, giám đốc công ty B đã sử dụng sản phẩm và phát biểu rằng..blah blah…

(Ảnh: chụp màn hình trang chủ của basecamp.com, 1 ví dụ về social proof)

Có thể dễ dàng nhận thấy trong hình trên, 37signals (công ty chủ quản của basecamp.com) đã sử dụng typography cho phần social proof khá rõ ràng khi nêu ra số lượng đối tác sử dụng sản phẩm, bên cạnh đó là hình ảnh của khách hàng + công ty tiêu biểu đặt cạnh form đăng ký cũng như nút bấm call-to-action.

5. The conversion goal – call-to-action (CTA)

Call-to-action (hay còn gọi là CTA) là mục tiêu cuối cùng của landing page mà bạn muốn người dùng hướng tới, click vào đó sau khi điền thông tin hoặc sau khi quyết định mua hàng/ tham gia sự kiện, download tài liệu PDF, đăng ký mua sản phẩm.v.v… Nói một cách khác, CTA chính là cách bạn muốn người dùng tương tác với landing page của bạn. Chính vì vậy, CTA cần được xây dựng sao cho đạt được mục đích mà landing page đề ra.

Một nút bấm CTA có 02 phần:

CTA Design. Đây là phần thiết kế đồ họa của nút bấm (button), và nó phải được thiết kế cũng như đặt ở vị trí thuận lợi để người dùng có thể dễ dàng nhận ra. CTA design có nhiệm vụ trả lời câu hỏi “where should I click?” của người dùng.
CTA Copy. Đây chính là chữ viết trên nút bấm call-to-action, hay còn gọi là CTA button text. Giống như nội dung của một biển chỉ dẫn, CTA copy chính là dòng chữ với nội dung kêu gọi người dùng hành động. Việc người dùng có bị thôi thúc hành động (click) hay không phụ thuộc vào việc CTA copy có giải đáp được nghi vấn “why should I click this button?” trong tư duy của họ hay không.

Ngày nay, thay vì việc đặt các CTA button với nội dung “SUBMIT” hoặc “SAVE”, “SEND” thì người thiết kế landing page thường sử dụng các cụm từ khuyến khích tâm lý người dùng hơn dưới dạng “Get my free e-book now”, “Take the 5 minute tour”, “Start my 30-day FREE trial” hoặc “Join FREE training course NOW”..v.v… Rõ ràng, những từ ngữ mang tính kêu gọi và mời chào sẽ có hiệu quả cao hơn là những từ mang tính hành vi thông thường của phần mềm máy tính. Đó cũng chính là đặt người dùng vào trọng tâm của thiết kế.

Trong một số trường hợp, bên cạnh CTA, bạn có thể đặt thêm các social sharing buttons như share Facebook, Twitter, gửi email… để người dùng có thêm lựa chọn nho nhỏ (ngay cả khi họ không muốn click vào CTA button).

5+ Forms

Sau cùng, các landing page thường được thiết kế đi kèm với các forms. Form thì rất đa dạng. Form ở đây có thể là đăng ký nhận ebook, đăng ký thành viên, đặt hàng trước một sản phẩm nào đó..v.v… và form đi kèm với CTA buttons. Một lưu ý quan trọng ở đây là form nên tối giản, càng đơn giản càng thuận lợi cho người dùng. Bạn có còn nhớ có 1 blog tôi từng viết rằng: người dùng thì lười biếng ? Đừng hỏi những thứ thừa thãi như qui mô công ty, số điện thoại, v.v… Hãy tập trung vào những thông tin thật cần thiết, ví dụ như email chẳng hạn.

Always try to balance the “size of the prize” (what you are giving away) with the level of information you are asking a prospect to provide. There is a fine line between being too greedy and not asking for enough to satisfy your marketing needs. – Oil Gardner

Số lượng dữ liệu phải nhập trên form nên cân bằng với dịch vụ / sản phẩm mà bạn cung cấp. Bản thân mỗi người dùng sẽ tự hiểu độ ngắn / dài của form thế nào là phù hợp. Chẳng hạn form mua hàng trực tuyến thì cần có address để giao hàng, nhưng form đăng ký download e-book dạng PDF thì chỉ cần tên người dùng, và email là đủ. Nếu cẩn thận hơn chút nữa, sau khi người dùng nhập thông tin vào form, bấm vào nút call-to-action, ngoài việc gửi email confirm cho họ, bạn có thể hiện thị thêm một màn hình dạng confirmation page để họ (người dùng) chắc chắn rằng yêu cầu của họ đã được gửi đi, và ghi nhận.

Thiết kế một landing page tốt không quá phức tạp, nhưng cần tỉ mỉ một chút, theo dõi hành vi khách hàng kỹ lưỡng một chút, campaign sẽ thành công.

Tham khảo:

Perfect landing page [URL]
Landing page design and how to… [URL]
Call to action design examples [URL]
SaaS: Software as a Service. Là dạng phần mềm cho thuê, hoạt động online.

Một chút về A/B Testing

September 9, 2013September 9, 2013 ~ binhtruong ~ 5 Comments

Sơ lược về A/B Testing trong web design, mà thực ra khái niệm cũng không có gì phức tạp

(Ảnh mô tả A/B testing, nguồn Internet)

Testing thường được quan tâm bởi QA/QC hoặc đối với những người chịu trách nhiệm đầu ra của sản phẩm như marketing manager, product manager. Tuy nhiên với UX thì usability testing cũng đóng vai trò quan trọng, bởi nó giúp cho người thiết kế sản phẩm hiểu rõ hơn tính hiệu quả của bản thiết kế. (Thiết kế ở đây tôi muốn nói là product design, không đơn thuần là graphical design).

Về cơ bản, A/B testing (trong phạm vi web design) là quá trình thực hiện kiểm tra (test) và so sánh (compare) hai phiên bản khác nhau của một website trong cùng một thời điểm để từ đó rút ra kết luận rằng bản thiết kế nào tốt / phù hợp hơn với người dùng cũng như với mục đích kinh doanh. Một số tài liệu còn gọi A/B testing là “split testing”.

Ví dụ như bạn có một website bán dịch vụ email marketing, nhóm marketer và designer trong công ty đang tranh luận xem bản thiết kế nào tốt hơn, có khả năng chuyển đổi nhiều khách hàng tiềm năng thành người mua hàng hơn… vậy thì cách tốt nhất (hiện nay) là thực hiện A/B test để kiểm chứng. Việc này sẽ được thực hiện trên 02 phiên bản của website: phiên bản A và phiên bản B. Bên cạnh đó, một nhóm người sẽ được phân công để test (nếu công ty bạn đủ số lượng người mong muốn). Kết quả sau cùng (ví dụ số lượng click vào nút mua hàng) của phiên bản nào tốt hơn, phiên bản đó sẽ được lựa chọn để “go live”.

A/B testing (sometimes called split testing) is comparing two versions of a web page to see which one performs better. (source: Internet)

Tại sao và có thể test những gì ở website?

Nếu nói “tại sao phải A/B testing” thì có lẽ hơi… thừa. Nhưng tựu chung lại một sự lựa chọn tốt là kết quả của nhiều phép thử. Chính vì vậy, cho dù website của bạn là dạng news, hay e-commerce, blog, market place.v.v… thì cũng nên test để kiểm tra lượng truy cập, tỷ lệ convert từ visistor thành khách hàng (1) sao cho đạt được mục tiêu khi làm ra trang web.

(Ảnh: các phiên bản khác nhau của A/B testing. Nguồn Internet)

Vậy đối với một website, nếu muốn thực hiện A/B testing thì có thể “test” những cái gì? hay nói nôm na là lôi cái gì ra để test? Câu trả lời là hầu hết mọi thành phần của website đều có thể là đối tượng của A/B (xem hình trên). Ở góc độ đơn giản, chúng ta có thể test những thành phần như (ở danh sách dưới đây, tôi chỉ giải thích những khái niệm mà tôi nghĩ nhiều người chưa biết):

Headlines
Sub headlines
Paragraph Text
Testimonials (Thường là những comment khen ngợi, khách hàng tiêu biểu)
Call to Action text
Call to Action Button
Forms
Links
Images
Content near the fold (Phần nội dung hiển thị phía dưới màn hình trước khi cuộn chuột để xem phần còn lại của trang web) (2)
Social proof
Media mentions
Awards and badges (Một dạng khen thưởng thành viên/khách hàng, áp dụng lý thuyết gamification)

Có thể nhận thấy, mọi thành phần (bao gồm cả content, information architect và graphical) của website đều có thể đem ra test. Nhưng đặt trọng tâm ưu tiên test cái gì, thì lại phụ thuộc vào mục tiêu bạn mong muốn đạt được ở website. Phần lớn các marketer nhắm vào call-to-cation và designer nhắm vào images, color.

Ở góc độ nâng cao của A/B testing, những người làm ở vị trí website product manager thường nhắm tới chiến lược giá (pricing structure), sales promotion (khuyến mại), thời hạn dùng thử sản phẩm, menu navigation, cách tính free/paid delivery và checkout khi thanh toán online. Cá nhân tôi thì cho rằng menu navigation là advance A/B testing bởi nó liên quan tới việc điều hướng hành vi, cũng như cấu trúc thông tin của hệ thống và cần phải theo dõi dài hơi trước khi có sự thay đổi. Tất nhiên là mấy vụ testing nâng cao (A/B testing in advance) này tốn công sức khi thực hiện hơn vì thay đổi qui trình, cách thức với những chức năng dạng core, cũng như việc đo đạc mất thời gian hơn.

Câu hỏi sau cùng có lẽ là “Test bao lâu thì đủ?”. Cái đó tùy thuộc vào bạn. A/B testing có thể thực hiện nhiều vòng, cho tới khi đạt mục tiêu đặt ra ban đầu về số lượng traffic, visitor, click, conversion.v.v… nhưng đừng để test quá dài bởi nó sẽ gây ra các ảnh hưởng không tốt (ví dụ như SEO, hay nhận thức của user).

Ngày nay muốn test tốt thì phải dùng tools. Hiển nhiên. Có một số dịch vụ “advance” hơn thì có thể sử dụng embedded code. Phần này tôi để các bạn tự khám phá. Hãy bắt đầu với cụm từ “online a/b testing tools” và dùng thử vài dịch vụ, đặt ra giả thuyết, mục tiêu và hoàn thiện sản phẩm qua các phiên bản A, B và có thể là C, D nữa.

Ghi chú:

(1) Tỷ lệ convert: Thường được gọi là Conversion rate, ám chỉ số lượng khách ghé thăm website chuyển đổi thành người mua hàng trực tuyến. Ví dụ 1 người mua hàng / 100 khách ghé thăm thì tỷ lệ là 1%.

(2) The fold: Để dễ hiểu hơn, các bạn có thể xem phần hiển thị đầu tiên trên màn hình của một website là “above the fold”, giống như một tờ báo gập đôi và bạn xem phía trên của nếp gấp. Tôi sẽ nói rõ hơn về khái niệm này ở 1 blog khác.

UI vs UX, thêm một góc nhìn

August 9, 2013August 10, 2013 ~ binhtruong ~ Leave a comment

Phân biệt UI, UX dưới góc nhìn interaction design

(Ảnh: UI/UX, nguồn Internet)

Từ khi UX (User Experience) ra đời thì có khá nhiều các blog, website nói về sự khác biệt giữa UI, UX. Hoặc với nhiều người thì đây là việc “rõ như ban ngày”. Hiểu nôm na thì UI (User Interface) là giao diện người dùng, có từ khi máy tính / máy điện toán ra đời và khá phổ biến trong thiết kế phần mềm máy tính ở thập niên 90. UX (User Experience) là những gì người dùng “trải nghiệm” trong và sau khi sử dụng sản phẩm. Có người nói, UI đi trước, UX đi sau. Cũng có người nói UI là giao diện, là sản phẩm còn UX là thương hiệu, dịch vụ, và là cảm nhận của người dùng, có tài liệu thì khẳng định UI cũng là 1 phần của UX… OK, có rất nhiều quan điểm, so sánh, nhìn chung là có vẻ dễ hiểu, nhưng cũng rất chung chung.

Thêm vào đó, những trang web như UX is not UI ( http://uxisnotui.com/ ) còn đưa ra bảng thống kê những khác biệt về UX và UI một cách rất cụ thể, chứng minh sự bao trùm của UX lên mảng UI với khẳng định UX là một giải pháp hoàn thiện.

“UX is the intangible design of a strategy that brings us to a solution”

Theo tôi quan niệm này không sai vì sản phẩm nào mà chẳng có phần UI để người dùng thao tác, tương tác với các tính năng của nó. Nhưng liệu có cách nhìn nào “dễ chịu” hơn và dễ hiểu hơn với UI cũng như tầm quan trọng của nó hay không?

(Bảng so sánh UX, UI, nguồn http://uxisnotui.com/ )

UI is communication

Có một điều thú vị là, năm 2013 đánh dấu sự trở lại về việc nghiên cứu cải tiến UI, với nhiều sách vở, paper về nó. Ở góc độ tương tác với người dùng, Everett McKay đã đưa ra quan điểm, nhận định khá dễ hiểu như sau: UI is communication. Trong nhận định của mình, McKay chỉ rõ 2 điểm như sau:

UI (User Interface): là phương tiện kết nối giữa người dùng và sản phẩm công nghệ. Một chiếc TV có các nút bấm điều khiển, có bảng điều khiển hiển thị kênh, âm lượng. Một website có các menu tương tác, nút bấm, thanh toán hay một chiếc ô tô có vô lăng, bảng thông tin điện tử hiển thị lượng xăng, tốc độ.v.v… Đó chính là “giao diện” hay là tiếp diện để giao tiếp với người dùng. Là những gì người dùng “trực tiếp nhìn thấy” và “cảm nhận” khi sử dụng 1 sản phẩm. (Looks and feels).
UX (User Experience): bao gồm toàn bộ trải nghiệm của người dùng đối với một sản phẩm. Trải nghiệm này tất nhiên bao gồm cả tương tác UI nhưng ngoài ra, nó còn bao gồm những thứ mà người dùng không giao tiếp trực tiếp với sản phẩm. Để dễ hiểu hơn, trải nghiệm có thể là quá trình mua hàng trực tuyến, hay mở gói một sản phẩm (un-pack), hỗ trợ kỹ thuật, chăm sóc khách hàng, chế độ bảo hành..v.v…

Giao tiếp luôn là chìa khóa của cuộc sống, và đối với phần mềm cũng vậy. UI là cách mà người dùng giao tiếp với hệ thống. Thông qua UI, người dùng biết họ phải làm gì. Ngược lại, với UX, đó là 1 quá trình nghiên cứu để giảm thiểu các thao tác “thừa” cho người dùng, giảm bớt những gánh nặng và những khó khăn mà người dùng gặp phải.

“User interface design addresses actions users must do, but user experience design also addresses actions users don’thave to do” – Everett McKay

Một hệ thống được thiết kế UI tốt thường là một hệ thống có các màn hình giao diện dễ sử dụng, hiển thị dashboard thông tin tốt, cho phép người dùng cấu hình (configuration) các thông số ngay sau khi cài đặt hoặc đăng ký sử dụng. Nhưng tiến xa hơn nữa, một hệ thống có UX tốt là hệ thống “không bắt” người dùng phải thiết lập các thông số cấu hình (configuration) trước khi sử dụng. Ví như Twitter chỉ cần đăng ký account là có thể tweet ngay lập tức.

Nói một cách ngắn gọn, UI chính là cách thức, phương tiện giao tiếp giữa người dùng và phần mềm, dù đó là web hay mobile app. Một UI tốt là UI mà người dùng có thể dễ dàng tiếp cận, dễ dàng “giao tiếp” thậm chí không phải đọc tài liệu user guide hay phải có người đào tạo. Hãy nhìn nhận UI là communication, và UX là quá trình trải nghiệm, cải tiến và rồi mang lại feeling tốt hơn.

Domino’s Pizza Saigon

August 9, 2013 ~ binhtruong ~ 4 Comments

Một số thiết kế UX của Domino’s Pizza Quận Tân Bình, HCM

(Ảnh: Tracking screen của nhà hàng Domino’s Pizza, Cộng Hòa, Q. Tân Bình, HCM)

Domino’s Pizza là một hương hiệu pizza của Mỹ đã tồn tại trên 50 năm. Khởi điểm với tên gọi DomiNick’s và đổi tên thành Domino’s một thời gian sau đó, hãng pizza này vào Saigon năm 2010 rồi sau đó nhanh chóng phát triển với nhiều chi nhánh trên khắp các quận nội thành. Ở Hà Nội thì chưa có cửa hàng nào. Mới đây Domino’s khai trương 1 cửa hàng ở quận Tân Bình nên tôi ghé thử, cũng 1 phần là có discount 30%.

Ấn tượng đầu tiên là design hoàn chỉnh, thống nhất 2 màu đỏ – xanh nước biển của hãng, từ logo cho tới màu tường, bao bì… trên tường sử dụng typography với phong cách khỏe khoắn và có gì đó rất US. Tuy nhiên, đập vào mắt và đáng chú ý nhất chính là tấm bảng thông báo thời gian phục vụ với từng đơn hàng (xem hình trên). Khi bạn order một đơn hàng, nhân viên sẽ hỏi tên của bạn rồi sau đó, khi đơn hàng đã nhập vào máy tính, thông tin của nó sẽ hiển thị trên màn hình bao gồm số thứ tự (ID đơn hàng), tên khách hàng, thời gian cần thiết để chuẩn bị món ăn và sau cùng là trạng thái của đơn hàng đang được xử lý tới đâu. Ví dụ: #1 – Binh – 12mins – in oven nghĩa là pizza của tôi đang trong lò sẽ được phục vụ trong vòng 12 phút nữa.

Idea này không mới, và có ở nhiều nơi áp dụng, hoặc là bằng cách hiển bảng điện tử hoặc bằng cách phát 1 thiết bị tự nhấp nháy đèn hoặc rung khi order của mình chuẩn bị xong xuôi. Cá nhân tôi thích cách dùng bảng điện tử như của Domino’s vì:

Thông tin được visualize giúp người dùng / khách hàng dễ theo dõi.
Tạo một cam kết cho tất cả các khách hàng về thời gian. Khi bạn đã công bố thời hạn hoàn thành 1 order, uy tín của bạn được đặt vào cam kết đó, và cũng có nghĩa là bạn tôn trọng những khách hàng đang chờ đợi.
Đầu tư nhỏ, ấn tượng + hiệu quả lớn.

Bên cạnh đó, Domino’s pizza cũng cần cải thiện một số điểm như:

Bảng điện tử nên để thông tin tiếng Việt, điều này sẽ giúp cho người dùng dễ hiểu hơn (không phải khách nào cũng hiểu “in oven” là bánh đang nướng trong lò). Điều này có thể do phần mềm của Domino’s chưa Việt hóa.
Khi khách hàng trùng tên nhau, ví dụ có nhiều người tên là Lan, Nhung.. thì việc theo dõi thông tin trở nên khó khăn. Giải pháp “gọn nhẹ” nhất theo tôi là đổi thứ tự cột thông tin. Ví dụ: ID đơn hàng, thời gian thực hiện, trạng thái và sau cùng là tên khách hàng. Ngoài ra trong hóa đơn đưa cho khách, ID đơn hàng cần in đậm và to hơn chút xíu.

Ngoài bảng điện tử khá hiệu quả thì Domino’s cũng đang áp dụng message wall/board dành cho khách hàng, nhưng đáng tiếc là chưa biết làm thế nào để đưa thông tin lên khoảng trống trên tường của họ.

(Ảnh chụp message wall của Domino’s Pizza)

Một mảng tường đen với khẩu hiệu CTA (Call To Action) bằng tiếng Anh “TELL US WHAT YOU THINK” khá nổi bật và bắt mắt, nhưng khách hàng (là tôi) phải làm sao để “viết” ý tưởng / góp ý của mình lên đây? Cung cấp cho khách hàng bút xóa màu trắng? hay sẽ để cho khách hàng dán sticky note lên tường? Việc này làm tôi nhớ tới một góc nhỏ trong quán cafe Starbucks ở Quận 1 mà ở đó, họ có góc dán ảnh của khách hàng (ảnh Polaroid) nhưng tôi cũng không biết làm sao để có ảnh và được dán lên đó? Như vậy thiết kế mới chỉ mang tính trang trí chứ chưa thực sự tạo ra “tương tác” với khách hàng. Chưa đạt được cái gọi là Interactive design.

Domino’s Pizza phục vụ các món ăn của họ bằng những hộp đựng bằng bìa carton giống như các hộp đựng pizza giao hàng tận nhà. Cách đựng thức ăn như vậy giúp khách hàng dễ dàng mang đồ ăn về nếu ăn không hết. Nhưng nếu bạn muốn một bữa ăn với những chiếc đĩa, dao, nĩa thịnh soạn thì có lẽ Alfresco, Pizza hut sẽ là lựa chọn phù hợp hơn.