Những điều thú vị khi xây dựng sản phẩm app

Nhân dịp dự án làm app *** cho một ngân hàng của Việt Nam mà mình đang là freelance PM cũng đang tương đối hoàn thiện và công việc của product bắt đầu thảnh thơi hơn một tí, hôm nay mình muốn viết chút gì đó về làm app.

Nói chung cảm giác cũng khác lắm. Bạn nào làm sản phẩm mà quen với web PC, web mobile rồi, thì qua app chắc cũng có chút chưa quen.

Mặc dù công việc thì cũng không khác mấy, thế nhưng, dưới cảm nhận của mình, làm app có một vài điều đặc biệt mà khi làm web thì không có được.

Cá nhân mình thích làm app hơn, vì mình cảm thấy làm app có thể sáng tạo nhiều hơn. Hoặc cũng do các dự án sản phẩm trên web của mình (đã từng làm qua) không được thăng hoa và thỏa sức sáng tạo nhiều lắm nên mình thấy thế.

Anyway, mình vẫn muốn viết về những điều khác biệt này, những thứ khiến mình hào hứng và phấn chấn hơn khi bắt tay vào làm một sản phẩm app hơn là một sản phẩm web.

1- Splash Screen

Mình không biết người khác thì sao, chứ mình thì thích mấy cái splash screen nhiều lắm. Cho các bạn chưa biết splash screen là gì, thì có thể tham khảo định nghĩa sau đây:

A splash screen is a graphic control element consisting of window containing an image, a logo and the current version of the software. A splash screen usually appears while a game or program is launching. [Source: Wikipedia]

Một định nghĩa khác:

A splash screen is an introduction page that is displayed as s program or computer is loading or booting. For example, when a Microsoft Windows computer is starting up, there is a Windows splash screen that is displayed while the Window is loading. [Source: Computerhope.com]

Nói nôm na thì nó là màn hình chờ của ứng dụng, mục đích sử dụng là để bổ sung thông tin về ứng dụng, nhà phát triển, phiên bản, đôi khi còn là các hướng dẫn căn bản để dùng app, hay là nơi tranh thủ show off cái gì đó để gây ấn tượng với người dùng.

Mấy màn hình này tùy vào từng app sẽ có số lượng nhiều hay ít, style gì, hiển thị thời gian bao lâu. Và phần lớn thì, các splash screen này chỉ hiển thị khi vào app lần đầu sau khi download.

Dù thời gian xuất hiện ít ỏi là thế, lại cũng hay bị skip nữa, nhưng  dù sao nó cũng như lời chào, nó là first sight, là ấn tượng đầu tiên của bạn với ứng dụng mà bạn mới tải. Người ta vẫn nói “love at first sight” – yêu từ cái nhìn đầu tiên – nếu ngay từ đầu vào app bạn đã thấy thích và thấy ấn tượng bởi mấy cái splash screen tưởng chừng như đơn giản ấy, thì hẳn bạn sẽ có những cảm giác dễ chịu hơn khi bắt đầu xài app phải không? Đó là lý do mình rất thích chăm chút cho các splash screen, và mục tiêu thì không còn gì rõ ràng hơn: chiếm được cái “love at first sight” mà mình nói ở trên.

2- Cách tương tác

Một trong những thứ mà mình đánh giá là ảnh hưởng khá lớn đến độ thông minh của một sản phẩm app, đó là cách tương tác với các tính năng, khu vực trên màn hình.

Khác với sản phẩm làm trên web PC/mobile, với sản phẩm là app, các thông tin cần phải được sắp xếp một cách thông minh, sao cho với một diện tích màn hình nhỏ, người dùng không bị rối mắt nhưng vẫn phải luôn tìm thấy thứ họ cần.

Cách hiển thị thông tin có thể theo hai hướng: hoặc hiển thị trực tiếp, hoặc được giấu đi và người dùng cần thực hiện một thao tác nào để để có thể hiển thị thêm thông tin. Chính vì thế, các cách tương tác với ứng dụng sao cho dễ hiểu, dễ dùng để có thể thấy được thông tin cần thiết là vô cùng quan trọng.

Giả sử như người dùng muốn xóa một thẻ thông tin trên web PC, họ bấm vào nút [delete] để xóa, hoặc chuột phải để chọn tiếp delete. Còn nếu là trên app, người dùng có thể swipe left (quẹt trái) để các button tùy chọn  hiển thị (ví dụ hiển thị thêm các lựa chọn delete, archive v.v…) sau đó mới bấm chọn hành động mong muốn của mình.

Ví dụ minh họa rõ ràng trên Evernote cho các bạn dễ hình dung – dưới đây là cách xóa một item trên web:

Xóa thẻ thông tin trên web PC (Bấm thùng rác) Hoặc chuôt phải –> Delete

Còn đây là cách xóa trên app:

Chỉ việc swipe left là 03 cái button tính năng mới (trong đó có chứa button thùng rác dùng để xóa) hiện ra. Giờ bấm thùng rác là xong.

Như thế, tận dụng triệt để cách thiết kế tương tác sẽ giúp app gọn hơn. Tổ chức cách tương tác tốt sẽ giúp app thông minh hơn. Và điều này sẽ luôn được đánh giá cao bởi người dùng.

3- Animation

Một yếu tố nữa mà mình khá chú ý để tâm ở một sản phẩm app là phần animation. Những animation sinh động, cuốn hút và đúng hoàn cảnh sẽ giúp nâng cấp trải nghiệm của người dùng với app.

Yếu tố animation cũng góp phần tăng thêm sức sống cho app và sẽ đặc biệt phát huy hiệu quả ở những sản phẩm app đòi hỏi sự sáng tạo, bay bổng.

Tùy vào loại app mà bạn làm để quyết định nên dùng animation nào và với tần suất như thế nào:

• Animation đem lại cảm giác hiện đại, chuyên nghiệp: thích hợp với các app nhóm fintech, shopping
• Animation đem lại cảm giác thư giãn, dễ chịu: thích hợp với các app health care hay meditation
• Animation kiểu rực rỡ màu mè và bắt mắt: thích hợp với các app chơi game cho trẻ em, em bé…
• Animation kiểu ấn tượng, nghệ thuật: thích hợp cho các app liên quan đến artwork

Ngoài ra, cũng có thể tham khảo một vài nguyên tắc thiết kế splashscreen từ những chuyên gia, ví dụ như 05 nguyên tắc dưới đây được xây dựng bởi Rachel Nabors, một chuyên gia trong lĩnh vực web animations tại W3C (chia sẻ tại bài viết Bad Design & Good Design trên IDF)

1. Animate deliberately: think through each animation before you create it.

2. It takes more than 12 principles: Disney’s 12 principles of animation work for films, but not necessarily for websites and apps.

3. Useful and necessary, then beautiful: aesthetics should take the back seat to UX.

4. Go four times faster: good animations are unobtrusive, which means they run fast.

5. Install a kill switch: for large animations such as parallex effects, create an opt-out button.

4- Câu chuyện về concept

Đồng ý là ở bản web PC và web mobile, cũng sẽ cần có concept, nhưng không hiểu sao mình vẫn luôn cảm nhận rằng concept đó sẽ rõ ràng hơn ở một sản phẩm là app, khi đem ra so với hai dạng còn lại.

Concept này bao gồm nhiều thứ từ design style đến cách hiển thị của nội dung, hiệu ứng liên kết giữa các khối, cách tương tác của bộ icon v.v… trong khuôn khổ một câu chuyện xuyên suốt của toàn bộ một sản phẩm app.

Sự liên kết càng chặt chẽ, càng bám sát concept thì usability càng tăng lên, người dùng càng có một trải nghiệm mạch lạc và đồng nhất, không bị đứt quãng.

Một sai lầm mình từng mắc phải trong ngày đầu chập chững làm app, là xây dựng một concept quá sơ sài và mơ hồ, dẫn tới khi làm, một vài nhóm trang bị conflict với nhau ở cách hiển thị và animation. Ví dụ như nhóm trang A thì hiển thị dạng card và swipe up – down, tới nhóm trang B thì lại chuyển sang dạng tròn với hiệu ứng xoay xoay không ăn nhập gì cả.

Thế nên mình rút kinh nghiệm là, làm gì thì làm, concept app rõ ràng chính là thứ đầu tiên mình cần phải làm rõ. Concept tốt không chỉ giúp cho app, mà còn giúp cho mình, giúp cho cả đội làm cùng follow theo dễ và không mất công sửa đi sửa lại.

—

Đấy chỉ có vài dòng như thế. Nói chung là, mình thấy làm product là app nó thực sự rất khác cảm giác làm product trên web PC, web mobile. Tốn công sức nhiều hơn, suy nghĩ đau đầu hơn. Làm app dùng được thì dễ, làm app thông minh mới khó.

Con đường học tập và tiếp thu thêm kinh nghiệm làm app của mình cũng còn khá dài. Hy vọng qua nhiều dự án hơn, mình sẽ lại càng rút ra được nhiều bài học hơn, có thêm nhiều trải nghiệm hơn để viết. Trước hết là cho bản thân mình. Và sau đó là chia sẻ với tất cả các bạn có cùng niềm đam mê chung.

—

Update tháng 11 năm 2017:

Hiện tại thì mình đã có thể công khai tên của sản phẩm app mà mình có nhắc tới ở đầu bài viết.

Đó chính là app TPBank Savy của ngân hàng TPBank.

Để trải nghiệm, các bạn có thể download tại đây: https://apps.apple.com/vn/app/tpbank-savy/id1284522516

Bản hiện tại mà các bạn đang xem, đã update thêm tới mấy version mới rồi. Mình chỉ join team dự án này khoảng hơn 1 năm, tới khi release được version đầu tiên thì mình dừng và cũng nghỉ hẳn làm freelance luôn vì quá bận. Cho đến giờ phút này, mình vẫn yêu Savy, không chỉ bởi đây là app product đầu tiên mình làm, mà còn vì những kỷ niệm rất đẹp (dù mệt), mà mình đã trải qua cùng các anh em development team ngày đó.

Với Savy, mình mong những điều tốt đẹp nhất sẽ đến với nó.

Xem thêm: Khóa học Product Management – Quản lý sản phẩm cho người mới bắt đầu