UX Review – Ứng dụng Foody, ngôi sao startup của năm 2017

Những ngày cuối tháng 9, giới startup Việt Nam lại cháy sáng lên với thương vụ Foody. Theo một bài báo trên Cafebiz mà tiêu đề bao gồm cả dấu hỏi chấm hỏi (?) ở cuối, Foody được mua lại 82% với 1 cái giá trong mơ, đâu đó tầm trên 60 triệu $. Quy ra thóc, giá trị của Foody tầm 1.500 tỉ. Nếu như ta tính 5 tỉ để mua một ngôi nhà mới xây ở Hà Nội, Foody dư sức mua đứt 300 ngôi nhà, tức là bằng cả một con phố mới toanh. Thương thay, ông chủ Foody và các thành viên sáng lập nếu mỗi ngày ngủ ở một ngôi nhà thì cả tháng sẽ ko ngủ trùng trong 1 ngôi nhà nào cả và phát chán vì cô đơn. Thành công và cô độc thường đi cùng nhau là đây chăng?

Truy cập khóa học "Tự học để trở thành UX Designer" online tại đây: https://designlab.edu.vn

Và không khó để dự đoán, những câu chuyện như Foody sẽ lại làm biết bao nhiêu bạn trẻ sẵn sàng bỏ học, bỏ làm, một tay cầm gói mỳ Hảo Hảo, một tay ôm ấp giấc mộng Startup và lao vào những giấc mơ làm giàu. Tuy nhiên việc làm giàu là của người muốn làm giàu, việc của người thiết kế là phải thiết kế. Tôi viết bài này không phải để cảm thán về thành công của Foody hay thương cảm nỗi cô đơn của ban sáng lập Foody. Với vai trò là 1 một UX Consultant – tôi sẽ thực hiện nghiên cứu và đánh giá trải nghiệm người dùng của sản phẩm này. Hi vọng của tôi là bài viết này cung cấp được 1 góc nhìn khác để 1 phần giải mã những thành công của Foody, phần khác giúp cho những người làm sản phẩm tìm thấy lợi ích và bài học cho riêng mình trong việc thiết kế trải nghiệm người dùng cho sản phẩm.

Trải nghiệm cốt lõi

Không khó để cảm nhận tham vọng của Foody – trở thành ứng dụng xã hội, một hệ sinh thái bao gồm tất tật mọi thứ xoay quanh việc tìm kiếm, đánh giá và đặt hàng đồ ăn tại Việt Nam. Tôi tạm định nghĩa 1 số các user stories và scenarios như sau

User stories:

Như trong 1 bài viết trước, trước khi bắt tay thiết kế bất cứ sản phẩm nào chúng ta đều cần định nghĩa “câu chuyện người dùng”. Đó là một hoặc một số các câu chuyện thể hiện được mong muốn và nhu cầu của người dùng. Thường thì các câu chuyện này nghe rất nôm na, khô khan, nhưng lại quyết định định hướng sản phẩm và nỗ lực để thực hiện nó. Thường thì để định nghĩa user story, người giám đốc sản phẩm, chủ xị, nhà startup-er.. phải là người ra quyết định. Nó cần được căn cứ vào tầm nhìn về thị trường, kinh nghiệm và những cảm nhận “hơn người” , chưa kể là các giác quan thứ 6, 7 gì đó của nhà sáng lập.. Nó khó lòng được đưa ra bởi.. bất kỳ ai. Sai lầm ở giai đoạn này sẽ trả giá rất lớn đối với đơn vị làm sản phẩm, có thể là những thứ như: sản phẩm rất tốt nhưng chả ai dùng vì chả phục vụ với nhu cầu thực tế nào của người dùng, hoặc là sản phẩm rất nhiều mục tiêu nhưng mới làm dc 2/10 thì đã hết vốn… và doanh nghiệp không thể kham nổi..

1. Là một thực khách đã biết mình tìm đố ăn “ABC”, tôi muốn tìm một quán ăn phù hợp nhất, theo các tiêu chí như: ngon nhất, được đánh giá tốt nhất, giá cả tốt, có các tiện ích đính kèm (như wifi, chỗ để xe, chỗ ngồi riêng, view đẹp…), cách tôi không quá xa hoặc trên 1 con phố nào đó…

2. Là một thực khách không rõ mình muốn ăn gì, nhưng muốn đến ăn tại một địa điểm như 1 con phố, một thành phố.. tôi muốn tìm được 1 số đề xuất phù hợp

3. Là một thực khách không rõ mình muốn ăn gì, cũng không biết muốn ăn ở đâu, đơn giản là tôi muốn xem trên thị trường có gì hay ho, hoặc hợp túi tiền, đang giảm giá hoặc mới lạ.. Nếu phù hợp thì tôi có thể đến ăn hoặc đặt đồ mang đến.

4. Là một thực khách không có nhu cầu hoặc không thể đến ăn tại cửa hàng – có thể đang bận đi làm tại văn phòng hoặc trông con nhỏ, tôi muốn tìm một dịch vụ giao hàng tận nơi phù hợp.

5. Là một người dùng tôi có thể làm những việc mang tính cá nhân:

• Lưu các quán ăn, địa điểm, bài viết.. tất tật cái gì xuất hiện trên Foody để có thể tìm lại dễ dàng
• Đánh giá (rate + ý kiến + ảnh + các thông tin hữu ích cung cấp cho cộng đồng) về một quán ăn
• Lưu lại lịch sử sử dụng trên Foody như các đặt hàng, các review, hóa đơn, tiền thưởng..
• Quản lý thông tin cá nhân, cấu hình cài đặt cho phù hợp với nhu cầu
• Được phụ vụ về mặt thông tin phù hợp hơn với sở thích và hành vi của tôi

User scenarios:

Khác với user story, user scenario bổ sung 1 số thông tin hữu ích hơn vào “câu chuyện người dùng”, đó là hoàn cảnh sử dụng như thời gian, địa điểm, với ai.. đặc biệt là làm kỹ thuật này sẽ làm mềm thiết kế UX cho sản phẩm bằng những thứ rất văn vẻ. Nó đòi hỏi người viết ra phải phát huy tối đa trí tưởng tượng và đó là trí tưởng tượng tự nhiên, kết hợp những kinh nghiệm trong thực tế và cuộc sống. Theo đó, user scenarios sẽ khiến 1 sản phẩm công nghệ khô khan sẽ được thổi sinh khí vào. Một lý do mà user scenario rất quan trọng chính là việc nó là ngôn ngữ chung của tất cả các thành viên và thậm chí cả khách hàng, bao gồm nhà sáng lập, đội marketing, PR, IT, design và người dùng mục tiêu. Do là ngôn ngữ chung nên mọi người đều có thể nói ra, thảo luận.. Thường thì sau bước này chúng ta sẽ tập hơn được 1 kịch bản người dùng tổng quát, hữu ích và phù hợp nhất. Một nguyên tắc cần nhớ trong việc tạo ra các user scenarios chính là việc phải bám dính với các user stories đã định nghĩa và .. không bàn lại những nội dung đó nữa.

Với Foody, do tôi là một người không hay ăn uống, tôi chỉ định nghĩa tạm ra 1 số các user scenarios, để chúng ta cùng cảm nhận:

1. Một buổi chiều tại văn phòng, nhóm của tôi bao gồm 10 người muốn đi ăn mừng sinh nhật 1 người bạn ngay sau giờ làm. Sau khi mail qua mail lại thì chúng tôi quyết định đi ăn món “lẩu thái”. Tuy nhiên là quán lẩu thái gần nhất mà 1 người bạn của tôi quen thì lại ở quá xa và chỗ ngồi rất bé, chỉ có 6 chỗ tối đa. Do đó chúng tôi cần dùng 1 ứng dụng để giúp chúng tôi trong hoàn cảnh này. Điều chúng tôi cần là 1 ứng dụng có thể giúp chúng tôi tìm 1 vài quán lẩu thái gần nhất, có thể phục vụ 1 bàn 10 người, có chỗ ngồi đẹp một chút và có bàn cao vì có mấy chị em váy áo rất “phức tạp”. Budget chúng tôi dành cho việc này là 200.000đ một người tức là 2M, du di tí cũng được, anh em sẽ chịu. Và để tránh tắc đường khi đi giờ cao điểm thì chúng tôi chỉ có thể đến quán cách công ty tầm 2-3km.

Chúng tôi muốn ứng dụng đó cung cấp các thông tin hữu ích như: trông quán đó thế nào, đồ ăn ngon không, kinh nghiệm gọi món ở đó, món gì được ưa thích nhất, có phải đặt hàng trước không.

Nếu có thể đặt hàng trước thì có thể cung cấp cho chúng tôi 2 công cụ: một là 1 cái form đặt hàng bao gồm các trường thông tin về số người, thời gian và ghi chú, 2 là gọi điện trực tiếp đến.

2. Vợ chồng tôi vào Đà Nẵng du lịch lần đầu tiên trong một chuyến du lịch 4 ngày 3 đêm. Sau ngày đầu tiên ăn uống hải sản ven biển, chúng tôi đã chán hải sản đến tận cổ. Chúng tôi nghe nói ở Đà Nẵng có rất nhiều đặc sản vùng miền, giá cả rất phải chăng. Nhưng quan trọng là phải chịu khó lọ mọ đèo xe máy đến từng ngõ ngách của Đà Nẵng, ăn uống như 1 người dân ở đây. Chúng tôi cần 1 ứng dụng có thể trả lời cho chúng tôi ở đây 1 số các câu hỏi như:

• Ở Đà Nẵng thì “không thể bỏ quan việc” ăn gì? ở đâu?
• Ở gần khách sạn chúng tôi, cách 2km thì có gì hay để ăn?

3. Tôi và người yêu muốn đi ăn món bò nhúng dấm. Hai đứa đã chuẩn bị cưới nên không đã công khai tài chính, hẹn hò nhưng vẫn muốn tiết kiệm tiền cho tương lai. Tôi muốn tìm một chỗ ăn bò nhúng dấm có set 2 người, chỗ ngồi đẹp – riêng tư và có điều hòa, không ồn ào càng tốt. Đặc biệt là phải phù hợp với tài chính (tức là giới hạn budget) và có giảm giá. Chúng tôi thích những nhà hàng mới vắng khách, đang có những chính sách khuyến mại và phục vụ cực tốt để kéo khách hàng đến, nhằm giới thiệu về nhà hàng. Quan trọng nữa là nhà hàng không quá xa địa chỉ nhà nàng để tôi không phải đưa đón về khuya..

Tôi cần một ứng dụng giúp tôi thực hiện được điều đó.

…

Đánh giá trải nghiệm người dùng của Foody

Tôi thực hiện bài đánh giá này trên ứng dụng Foody chạy trên chiếc điện thoại cá nhân Samsung Note 5, màn hình 5.7inch, độ phân giải 2K. Đây là một chiếc điện thoại cấu hình cao, màn hình ngoại cỡ và chất lượng hiển thị tương đối tốt. Tôi sử dụng Wifi để tải app Foody từ Google Play về và chạy như lần đầu tiên. Dưới đây là 1 số các ý kiến của tôi về thiết kế trải nghiệm người dùng của ứng dụng này.

Đánh giá chung:

Foody mang dáng dấp của một ứng dụng đang trên đà phát triển và đầy tham vọng. Thể hiện qua những ý tưởng và lượng chức năng đầy ắp trên ứng dụng này.

• Một công cụ search địa điểm, quán ăn.. là 1 chuỗi trải nghiệm kinh điển: Search -> Trang listing (+ filter, sorting) -> Trang detail -> Các target actions như liên lạc, đặt hàng, review..
• Dịch vụ giao hàng tận nơi: Lọc ra những quán ăn đặc thù có cung cấp dịch vụ này và phân bổ vào các category như: cơm trưa, đồ ăn, thức uống…
• Dịch vụ đặt trước chỗ ngồi
• Dịch vụ tự đặt món ăn, xảy ra khi người người dùng ngồi tại quán và không muốn .. gọi nhân viên phục vụ hoặc xếp hàng
• Coupon: Mua trước mã coupon để sử dụng khi đến quán ăn hoặc một sự kiện.
• Mạng xã hội: kết nối các thành viên (Foody gọi là Foodee) lại với nhau theo liên kết qua Facebook. Các thành viên có thể nhìn thấy các hoạt động của những người bạn đó, bấm vào “Quan tâm” như một cách thức đến giữ kết nối.
• Foody có được đầu tư vào trải nghiệm người dùng, thể hiện qua thiết kế đồ họa (Graphic design) khá được trau truốt của ứng dụng. Giao diện của Foody bắt mắt với tông đỏ thẫm đặc trưng, được sử dụng rất khéo và thoáng trên các trang vừa giữ được tính thương hiệu, vừa tôn được vẻ đẹp của những bức ảnh chụp món ăn. Layout được thiết kế theo xu hướng mới với bottom navigation bar nhỏ xinh ở bám ở dưới cùng, không sử dụng menu ẩn (hamburger menu) mà chia đều trên các chức năng thể hiện bởi các tab.

Trên Foody hầu như không có lỗi cơ bản về navigation và các design heuristics (10 heuristics về UI design bao gồm: Visibility of system status, Match between system and the real world, User control and freedom… tương đối phức tạp tôi sẽ đề cập trong 1 bài viết khác). Những lỗi này thường rất phổ biến trên các ứng dụng của Việt Nam thiết kế và đôi khi thể hiện “đẳng cấp” của các sản phẩm. Navigation của Foody logic và dễ tiếp cận, các chức năng khá minh bạch và độ sâu thấp, dễ dàng hiểu được với người mới tải app về. Tôi cũng đánh giá cao những điểm nhấn trong Foody như việc sử dụng 1 bộ icon rất xinh xắn, cong mềm mại và đúng với xu hướng thiết kế năm 2016 – 2017. Hiện xu hướng này đang được sử dụng trên rất nhiều ứng dụng nổi tiếng như Facebook, Instagram và Twitter..

Một số vấn đề về UX

Trên Foody có quá nhiều trang và kịch bản người dùng nên tôi sẽ chỉ chọn ra 1 số các trang để tiến hành review. Tôi sẽ review trên flow chính: Trang chủ -> Khám phá -> Listing ->Detail

1. Trang chủ

Tôi thích review sâu vào trang chủ của 1 ứng dụng, nó sẽ kể câu chuyện về sản phẩm và về giá trị cốt lõi của sản phẩm. Nó sẽ quyết định khách hàng sẽ tiếp tục giữ ứng dụng này trên máy điện thoại hoặc xóa nó đi. Qua trang chủ, thông thường thì sẽ thể hiện được 60% “mức độ đầu tư” về UX của sản phẩm đó.

Có vẻ như Foody có theo đuổi 1 ứng dụng nổi tiếng của tụi tây là Foursquare, thể hiện qua trang chủ na ná giống nhau:

Tuy nhiên cả 2 giao diện trang chủ trên kia đều có những vấn đề về thiết kế, nhưng tôi sẽ không quan tâm đến Foursquare mà chỉ đi sâu vào chủ điểm của bài viết này, trang chủ của Foody: Đây là thiết kế đúng về mặt thông tin và navigation khi đẩy toàn bộ những giá trị cốt lõi và cánh cửa mở nhanh đến các chức năng chính của ứng dụng. Chúng ta thấy rõ mục tiêu của ứng ụng qua hộp search, chức năng lướt dạo (qua chức năng khám phá), đặt hàng hay tự đặt món…

– Dòng chữ “Xin chào Foodee”: Foody gọi những người khách hàng của họ là Foodee, tôi cho rằng đây là 1 cách chơi chữ, lấy 2 chữ e cuối cùng trong từ employee để ghép vào từ Food. Đây là 1 ý tưởng hay, tuy nhiên tôi lại nghĩ là nó có vấn đề về âm thanh khi đọc lên, cả tên ứng dụng và từ này đều sẽ được đọc là “Phút-đi”, điều đó không hẳn là hay để phân biệt. Thêm nữa tại sao không phải là Fooder hay Foodist nhỉ?

– Dòng chữ “Đăng nhập để trải nghiệm tốt hơn”: Thì không thể touch vào để có thể đăng nhập được, vậy thì.. làm sao để đăng nhập. Cách giải quyết rất đơn giản, thêm gạch chân của chữ đăng nhập và thêm action vào dòng này trỏ đến form đăng nhập. Thêm 1 điểm nữa là tôi thích có từ “Vui lòng” vào trước dòng này, nó sẽ trang trọng hơn.

– Về mặt graphic design, background gradien từ màu vàng nhạt đến màu trắng thực sự hơi quá ẩu tả, có lẽ lấy cảm hứng từ Foursquare. Nó khiến giao diện trở nên cứng nhắc và đáng tiếc lại cứng nhắc ko đúng đỗ, tại trang chủ – trang đầu tiên khi khách hàng mở ứng dụng. Tại sao ko dùng 1 hình ảnh quán bar, hoặc cửa hàng ăn, hoặc những gương mặt rạng rỡ được xử lý nên để thay cho cái background này?

Ví dụ dưới đây thể hiện 1 cách giải quyết, hình ảnh món ăn được làm chìm dưới các menu và nội dung. Chỉ 1 cách thể hiện đơn giản như thế này, câu chuyện về sản phẩm sẽ hay hơn rất nhiều so với cách design của Foody.

Ngoài ra thì còn có 1 số vấn đề tôi có thể hiện trên hình dưới đây:

Một trong những lỗi lầm lớn nhất về UX trên là trang chủ Foody mắc phải, đó chính là thiếu độ tương phản đủ (contrast) giữa các menu chức năng.

– Chức năng tìm quanh đây có lẽ là 1 điểm nhấn của Foody thì được bố trí như 1 chức năng phụ nằm trong phần tìm kiếm. Với cách bố trí này thì người dùng sẽ khó lòng biết nhấn vào đó để ra 1 chức năng riêng. Thực tế thì Foody đã phải bố trí 1 màn hình trợ giúp lần đầu bằng 1 cái tooltips trỏ vào đó, nhưng có lẽ thế là không đủ. Tôi cho rằng nó cần phải là 1 icon đầy màu sắc và có 1 cái tên đoàng hoàng, kiểu như “Gần đây có gì?”

– Chức năng khám phá sẽ đáp ứng 1 loại đối tượng mà “không có gì trong đầu”, tức là không món ăn, không địa điểm, không mục đích rõ ràng.. Họ dùng Foody để thỏa mãn một nhu cầu nào đó, có thể là vô thức hoặc cái gì đó như “cơn nghiệp”.. Hành vi của người dùng này giống như người sử dụng Facebook, dùng ngón tay lướt lướt lướt 1 cách vô thức qua các feed của bạn bè và dừng lại ở cái gì đó.. đập vào mắt, để lại 1 cái like hoặc comment. Hành vi này xảy ra liên tục ở nhiều thời điểm trong ngày. Trong trường hợp này tôi cho rằng không nên đặt nó như một menu item mà nên hiện luôn ngoài trang chủ, ngay phía dưới các menu. Người dùng thay vì nhìn và cố gắng đoán xem “Khám phá” là gì, họ có thể đơn giản lướt ngón tay lên “mãi mãi” để scan qua các thông tin hữu ích. Thông tin này sẽ thay đổi mỗi khi họ vào Foody phụ thuộc vào: địa điểm họ đứng, các thông tin mới nhất theo thời gian và hoạt động của mạng lưới bạn bè (theo facebook).

– Đặt giao hàng, đặt chỗ và coupon là 3 chức năng cùng một kiểu, nó xảy ra giữa người dùng và ứng dụng Foody, từ xa – nó chỉ khác nhau về bộ lọc thông tin. Nhưng tự đặt món thì khác, nó xảy ra khi người dùng ở tại quán ăn đó, về mặt hành vi, nó hoàn toàn khác. Vì vậy cần phải bổ 3 cụm chức năng này ra để tránh nhầm lẫn.

– Ngoài ra thì sử dụng ảnh thật để thể hiện chức năng trên menu là tương đối khó. Người dùng hoàn toàn có thể lý luận thế này: Tôi không có nhu cầu chụp ảnh món ăn (với menu Khám phá), tôi không hiểu sự liên quan giữa món gà trên đĩa và “đặt giao hàng”, tôi tưởng nó phải được đựng trong túi craft hoặc túi nilon, có 1 anh chàng shipper mặc đồng phục mang đến chứ? Đặt chỗ có cái hình gì vậy? Quán trà sao? Tôi tưởng là sẽ là hình 1 người nhân viên quán ăn nghe điện thoại và nói: vâng ạ, nhà em còn chỗ trống? Hay như coupon thì là cái gì mà lại có hình QR?..

– Việc sử dụng wording cho các menu cũng khá là thiếu thiện cảm. Thường thì để tối ưu cho người dùng để định hướng hành vi của khách hàng, người ta thường dùng những từ “tạo hành động” như là “hãy đặt món ngay”, “gọi ngay để được hỗ trợ 24/7”, “đặt để được giao hàng miễn phí”, “hãy thử 1 trải nghiệm mới..”. Vì thế những từ ngữ như: Khám phá, Đặt giao hàng, Đặt chỗ, Tự đặt món hoặc nữa là Coupon (thiếu luôn động từ so với các menu khác) nó sẽ hơi buồn và.. không thể hiện được đủ chức năng của nó.

2. Trang khám phá

Trang này về cơ bản thì chỉ có 1 số vấn đề liên quan đến ngôn ngữ design không đúng nên gây khó hiểu cho người dùng thôi. Ví dụ là Tiêu đề được dùng chung với bộ lọc, nên khi đọc lên tên tiêu đề (vốn chỉ là 1 item trong bộ lọc) thì gây khó hiểu. Cách giải quyết thì chỉ cần đặt lại tên cho bộ lọc này, hoặc là tách riêng ra: tiêu đề riêng, bộ lọc riêng.

Ngoài ra Foody thay vì sử dụng ngôn ngữ float button cho “những chức năng hay dùng trên trang hiện tại”, thì lại dùng 1 icon dấu cộng – vốn dĩ phù hợp với chức năng “thêm mới”.

3. Trang detail

Trang detail được thiết kế khá tốt, những thông tin quan trọng lần lượt được đưa lên đầu: Ảnh -> tiêu đề -> Các tương tác + Điểm rate (Được highlight lên bằng màu xanh) -> Tình trạng mở cửa / đóng cửa? -> Danh mục ảnh và các thông tin khác.

Tuy nhiên vẫn có 1 số vấn đề về sắp xếp vị trí thông tin có thể tối ưu được hơn.

Phần menu tương tác bao gồm 5 phần: Tải ảnh, Checkin, Bình luận, Lưu lại và Chia sẻ tôi cho rằng có thể bổ ra thành nhiều cụm bởi 5 chức năng này không có độ contrast bằng nhau. Trong đó 2 chức năng là Check-in và Đánh giá phải được đưa lên đầu tiên, có mức độ nhận dạng lớn nhất. Chức năng tải ảnh có thể làm nổi bật nhưng sẽ đưa cùng vào khu vực ảnh, và thêm cả trong phần check-in (người dùng sau khi check-in xong thì có nhu cầu tải ảnh và review). Chức năng lưu lại và chia sẻ thì chỉ cần dùng 2 icon (vì nó rất đặc trưng) trên nền ảnh chính. Khi đó người dùng có thể có được lựa chọn dễ dàng hơn và tăng cao khả năng tương tác của người dùng.

Kết luận

Trên đây là một số ý kiến của tôi về thiết kế trải nghiệm người dùng của Foody, ngôi sao nổi nhất trong các sản phẩm Startup của làng công nghệ những ngày tháng vừa rồi – cũng có thể là năm nay luôn. Những ý kiến này chỉ có 1 phần rất nhỏ là ý kiến cảm nhận cá nhân của riêng tôi, phần lớn được dựa trên các nguyên tắc thiết kế được định nghĩa trong các guide line và tài liệu hướng dẫn thiết kế và đánh giá phổ biến trên thế giới. Tuy nhiên chắc chắc không khỏi có những điều phiến diện và cá nhân. Hi vọng sẽ không làm mếch lòng ai cả và góp phần làm cho Foody rút ra đc 1 vài điểm hữu ích, để làm tốt hơn và tốt hơn nữa. Cám ơn các bạn.

**13/10/2017 **Phạm Khôi

Kết nối

Trên đây là 1 số ý kiến của tôi về thiết kế UX của ứng dụng Foody. Nếu bạn có thêm các thông tin hoặc ý kiến khác, bạn vui lòng bổ sung bằng cách comment ở dưới bài viết, hoặc join vào group Cộng đồng UX Việt Nam, chúng tôi sẽ cập nhật (có ghi nguồn) để mọi người cùng có thể có thêm thông tin. Trân trọng cám ơn.

Bằng cách: tham gia nhóm facebook Cộng đồng UX Vietnam Truy cập và theo dõi website: https://uxvietnam.com