CÁC THẮC MẮC RỘNG HƠN VÀ CÁC ẢNH HƯỞNG NGOẠI QUAN
Chương 10. Mobile: Không chỉ đơn thuần là tên 1 thành phố thuộc bang Alabama nữa
Chào mừng tới thế kỉ 21 - Bạn có thể bị chóng mặt đấy.
[Gáy thật to] SỨC MẠNH TẦM CỠ VŨ TRỤ!
[Lí nhí] Mà phải sống trong cái đèn bé như lỗ mũi!
_ Thần đèn trong phim Aladdin, khi nói về sự trái khoáy nghịch lý của việc tồn tại như 1 Thần đèn _ À, smartphone.
Cái bọn điện thoại ấy, chúng nó đang trở nên ngày càng thông minh hơn. Chúng nó họp hội đồng trong ngăn kéo hàng ngày và lên kế hoạch kỹ lưỡng. Nhưng phải mãi tới Bước Nhảy Vọt (Apple cho ra mắt iPhone lần đầu tiên vào năm 2007) thì bọn điện thoại này mới có được nhận thức.
Bản thân tôi thì lại chào mừng sự xuất hiện của mấy ông tướng bé xinh, tốn thời gian này. Tôi biết ngày xưa tôi đã từng sống vui vẻ mà không cần 1 chiếc máy tính tiên tiến có màn hình cảm ứng và kết nối mạng ngay trong túi áo, nhưng càng ngày càng khó để nhớ lại cuộc sống của tôi hồi đó ra sao.
Và tất nhiên cũng vào khoảng thời gian này mà phiên bản Mobile cho các trang Web thành hình. Đúng là trước đây cũng đã có cái gọi là trình duyệt Web trên điện thoại rồi, nhưng bọn này - theo thuật ngữ chuyên ngành - quá lởm.
Vấn đề vẫn chỉ xoay quanh 1 thứ - như Thần đèn đã nói rất chuẩn - chính là không gian sống bé như cái lỗ mũi. Các thiết bị mobile (di động) đồng nghĩa với việc các thiết bị đó sẽ bị nhồi nhét mọi thứ vào, cả cái trang Web dài như bài sớ bị gói lại trong 1 cái màn hình có kích thước bé như lòng bàn tay. Có nhiều giải pháp đã được đưa ra, thậm chí các phiên bản trang Web tinh gọn nữa (nhớ cái thời mà ta phải ấn số tương ứng để chọn các menu item được đánh số không?) và, như thường lệ, những người thực sự cần đọc thông tin vẫn phải tự mò mẫm trong khổ sở.
Nhưng Apple đã thành công trong việc tích hợp nhiều tính năng của máy tính vào trong 1 giao diện trình duyệt được thiết kế và cấu tạo cẩn thận (mà lại có dáng hình vừa mắt, thon gọn, đầy thẩm mỹ nữa chứ). Một trong những phát kiến tuyệt vời của Apple chính là khả năng cuộn (scroll - hay là vuốt lên vuốt xuống đó) và zoom to
nhỏ tuỳ ý (lấy 2 ngón tay co kéo màn hình) nhanh lẹ. (Chính cái khoản “nhanh-lẹ” này - chính cái tốc độ phản ứng cực tốt của thiết bị - là thứ ăn tiền, giúp cho sản phẩm thực sự hữu ích)
Lần đầu tiên trong lịch sử, người dùng thực sự thích lướt Web trên 1 thiết bị mà họ có thể mang theo mình mọi lúc mọi nơi. Với tuổi thọ pin kéo dài cả ngày, bạn có thể xem mọi thứ ở bất cứ đâu, bất cứ khi nào. Nói rằng đây là 1 bước chuyển đổi to lớn không hề quá lời chút nào. Tất nhiên, bước chuyển này không chỉ gói gọn mỗi việc sử dụng Web. Cứ xem xem có bao nhiêu thứ mà chiếc smartphone gọn nhẹ của bạn đã tích hợp được: 1 chiếc máy ảnh (máy quay video nữa, với 1 số người thì đây là chiếc máy ảnh / máy quay phim tốt nhất họ sở hữu), thiết bị định vị GPS phủ sóng toàn cầu, đồng hồ, đồng hồ báo thức, kho ảnh và máy phát nhạc, etc...
Đúng vậy đấy, chiếc máy ảnh tốt nhất với chúng ta không phải là 1 chiếc máy ảnh tân tiến nhất, mà là cái nào chúng ta có thể mang theo mình ở mọi lúc mọi nơi.
Và thử nghĩ về việc những người đang sống ở các quốc gia đang phát triển, smartphone chính là chiếc máy tính đầu tiên - có lẽ là duy nhất đối với họ, theo cùng cái cách mà họ có thể sử dụng đt di động trước cả khi họ dùng điện thoại để bàn. Không thể chối cãi được rằng các thiết bị dị động chính là con sóng của thời đại mới, trừ những thứ phải xử lý dữ liệu đồ sộ (ví dụ như, ít nhất là ở thời điểm hiện tại, các phần mềm làm video) hoặc các phần mềm cần màn hình giao diện lớn (Photoshop, Ai, CAD, etc..)
Sự khác biệt là gì?
Vậy, Tính khả dụng có gì khác khi bạn đang thiết kế cho 1 thiết bị di động?
Theo 1 cách nào đó, câu trả lời là: không nhiều. Các quy tắc cơ bản vẫn thế. Có khi trên các màn hình nhỏ của thiết bị di động thì người dùng còn lướt nhanh hơn và đọc ít hơn ấy.
Nhưng đúng là có 1 vài sự khác biệt cơ bản về thiết bị di động có thể gây ra các vấn đề khá khó nhằn liên quan tới Tính khả dụng.
Khi tôi viết những dòng này, Web và App design cho các thiết bị di động vẫn hầu hết đang ở trong cái thời
“Wild West” (tạm dịch: thời đồ đá) trên nhiều phương diện. Chắc sẽ phải 1 vài năm nữa thì mọi thứ mới khác đi được, có thể là tới lúc đó thì các cải tiến công nghệ mới cũng sẽ ra đời, thúc đẩy cả quy trình bắt đầu lại 1 lần nữa.
Tôi sẽ không nói nhiều tới những Best-practice cụ thể, bởi vì có lẽ sẽ còn cả đống các ý tưởng hay ho về thiết kế giao diện có tiềm năng trở thành các tập quán phổ biến trong tương lai, thậm chí hiện tại còn chưa được ra đời. Và tất nhiên các nền tảng công nghệ sẽ tiếp tục đổi thay với tốc độ nhanh hơn cách chúng ta tiếp cận chúng rất nhiều.
Tôi sẽ nói tới 1 vài thứ mà tôi đảm bảo sẽ đúng mãi trong tương lai. Và điều đầu tiên là…
Quan trọng là ở chuyện Đánh đổi.
1 cách nhìn các thiết kế - bất cứ loại thiết kế nào - đó là thiết kế cần phải có khuôn khổ (những thứ bạn phải-làm và những thứ bạn không-nên làm) và đánh đổi (việc chúng ta phải đưa ra các lựa chọn không-được-lý-tưởng-như-mình-muốn để sản phẩm của mình nằm trong khuôn khổ nói trên).
Nói theo cách của tổng thống Lincoln, điều tốt nhất bạn có thể làm, chính là làm vừa lòng 1 vài người, tại 1 vài thời điểm. (Đó là nếu đúng trên thực tế ổng có nói “Bạn có thể lừa 1 vài người mãi mãi, và lừa tất cả mọi người ở 1 vài thời điểm, nhưng bạn không thể lừa tất cả mọi người mãi mãi”. Một trong những điều mà tôi học được sau bao năm lăn lộn trên mạng, đó là khi bạn gặp 1 cái ảnh người nổi tiếng và 1 câu quote bên cạnh, thì 92% là câu đó không phải do người kia nói ra. không tin bạn cứ thử check Wiki của Lincoln mà xem.
en.wikiquote.org/wiki/Abraham_Lincoln )
Có hẳn 1 cái ảnh meme được lưu thông rộng rãi về việc các Khuôn khổ không phải là 1 thế lực tiêu cực như người ta hay tưởng, mà thực ra chúng lại khiến việc thiết kế dễ dàng hơn và tạo môi trường tốt hơn cho tư duy cải tiến sáng tạo.
Sự thật đúng là như thế - Khuôn khổ thực sự rất hữu ích. Nếu bạn phải đi mua ghế sofa mà phải vừa vặn với cái phòng này, và hợp màu với cái tường này, thì việc tìm mua sẽ dễ dàng hơn nhiều so với việc cứ nhắm mắt mua đại. 1 mô tả yêu cầu nhất định khi vẽ tranh luôn mang lại 1 hiệu ứng tập trung cần thiết, còn nếu trường hợp là 1 tấm giấy trắng với vô hạn sự lựa chọn - tuy nghe có vẻ tự do thoải mái - có thể gây ra hiệu ứng tê liệt.
Bạn có thể không tin rằng Khuôn khổ có ảnh hưởng tích cực cũng được, nhưng chuyện đó cũng chẳng quan trọng: Cứ thiết kế là sẽ có khuôn khổ. Và khi có khuôn khổ, sẽ phải có đánh đổi.
Theo kinh nghiệm của tôi, rất nhiều - nếu không muốn nói là hầu hết - các vấn đề nghiêm trọng về Tính khả dụng là hậu quả của việc đưa ra quyết định sai lầm trong việc đánh đổi.
Ví dụ nhé, tôi không dùng app CBS News trên điện thoại.
Dùng 1 thời gian thì tôi thấy là các mẩu tin của nó được bẻ ra thành rất nhiều cụm nhỏ (đôi khi là quá nhỏ), và mỗi cụm lại mất bao nhiêu tgian để load (nếu nó mà load nhanh thì có khi t cũng không ngại dùng đâu). Và như để sát muối vào vết thương, ở mỗi page bạn lại phải cuộn qua cùng 1 cái ảnh để đọc được 1 mẩu content ngắn cũn. Trải nghiệm nó như sau:
Tôi khó chịu với việc này tới mức khi tôi lướt xem tin tức trên Google (thứ mà tôi làm vài lần mỗi ngày) và nhìn thấy cái link là của CBS thì tôi bỏ qua luôn, tìm của trang khác chứ nhất quyết không vào lại đó đọc nữa.
Khi tôi gặp các vấn đề kiểu này, tôi hiểu là nó đang tồn tại không phải vì cái đội xây dựng sản phẩm chưa nghĩ tới vấn đề đó. Trên thực tế, tôi khá là chắc kèo rằng đây là chủ đề của những cuộc tranh luận căng thẳng mà trong đó 2 hay nhiều bên tham gia đều phải thỏa hiệp.
Với trường hợp đánh đổi này của CBS thì tôi cũng không rõ các Khuôn khổ được đưa ra là gì. Vì trên các page có cả Quảng cáo, có thể yêu cầu khuôn khổ là phải thiết kế trải nghiệm đọc báo sao cho có nhiều page view nhất có thể. Hoặc yêu cầu khuôn khổ có thể liên quan tới cách bài báo được chia phần cho các mục đích khác nhau trong hệ thống quản lý bài viết. Tôi có thể đoán cả ngày. Tôi chỉ biết là họ đã đưa ra 1 sự lựa chọn đánh đổi, và sự lựa chọn đó đang không tập trung vào việc tạo ra 1 trải nghiệm sử dụng tốt đối với khách hàng.
Cái vất vả bậc nhất trong quá trình tạo ra trải nghiệm sử dụng tốt trên nền tảng Mobile chỉ xoay quanh việc làm sao để đưa ra các quyết định đánh đổi hợp lý mà thôi.
Chế độ hà khắc của không gian chật hẹp
Thứ rõ ràng hiển nhiên nhất về các màn hình mobile, chính là kích thước nhỏ bé của nó. Hàng thập kỉ qua chúng ta đã và đang thiết kế cho các kiểu màn hình mà, ở thời đó thì có thể vẫn được cho là bé, nhưng giờ đây nếu so sánh với tiêu chuẩn hiện tại thì còn rộng rãi thoải mái chán. Mà ngay từ hồi đó thì đội designer đã phải cố gắng để nhồi nhét tất cả mọi thứ lên màn hình rồi.
Nếu bạn tưởng không gian trên trang Web Home page đã quý lắm rồi, thử thiết kế trên mobile phát là hiểu ngay. Nên chắc chắn kiểu gì cũng phải có đánh đổi.
Một cách để thích ứng với không gian nhỏ hơn là vứt mấy thứ thừa thãi đi. Tạo ra 1 bản thiết kế cho Mobile giống như 1 phiên bản thu gọn của Website. Nhưng tất nhiên việc này sẽ đặt ra 1 câu hỏi khó nhằn: Nên vứt đi phần nào bây giờ?
Một cách tiếp cận phù hợp chính là Mobile First: Thay vì thiết kế 1 phiên bản đầy đủ điện nước (thi thoảng còn hơi quá đầy đủ) của trang Web trước tiên rồi sau đó lọc bỏ các phần để làm bản Mobile, bạn có thể thiết kế phiên bản Mobile trước, dựa trên các tính năng và nội dung quan trọng nhất đối với người dùng. Sau đó bạn vẫn có thể thêm các tính năng và nội dung khác khi lên bản Website.
Đó là 1 ý tưởng tuyệt vời. Vì sao, đơn giản bởi vì phương pháp này bắt bạn phải tập trung quyết định xem cái nào là thực sự cần thiết, cái nào người dùng cần nhất. Đó luôn luôn là 1 hướng đi phù hợp.
Nhưng có người lại hiểu rằng phương pháp đó nghĩa là chúng ta chỉ cần chọn những tính năng mà người dùng muốn làm khi mà họ phải sử dụng thiết bị di động. Giả thuyết này cho rằng, khi người dùng sử dụng phiên bản mobile, họ thường ‘đang ở ngoài đường', ‘đang phải di chuyển', chứ không phải ngồi làm việc với máy tính, nên thành ra trên Mobile chúng ta chỉ cần các tính năng mà người dùng hay sử dụng khi đang ở ngoài đường thôi. Ví dụ, khi đang đi shopping ở ngoài thì bạn có thể sẽ muốn kiểm tra số dư trong tài khoản ngân hàng, nhưng bạn sẽ hiếm khi muốn tạo tài khoản khác, hoặc đối chiếu lịch sử giao dịch.
Tất nhiên, đây là 1 ngộ nhận sai lầm. Người dùng thường sử dụng thiết bị di động ở bất cứ chỗ nào họ thích, ngay cả khi đang ngồi chơi ở nhà, và họ muốn (và kỳ vọng) có thể làm được mọi thứ. Hoặc ít nhất là ai cũng muốn làm 1 vài thứ gì đó, và nếu tính tổng mỗi người vào thì cũng gần hết mọi tính năng rồi.
Nếu bạn định thêm vào mọi tính năng, bạn càng phải để ý thật kỹ tới việc phân cấp ưu tiên.
Những thứ mà người dùng cần làm trong lúc đang gấp, hoặc thường xuyên phải làm, cần phải dễ tìm, dễ thao tác. Tất cả mọi thứ khác thì có thể chấp nhận bắt người dùng tap nhiều hơn, đi xa hơn, nhưng dù gì thì vẫn phải có 1 lộ trình rõ ràng, dễ hiểu tới chúng.
Trong 1 vài trường hợp, việc các màn hình bị thiếu không gian cũng đồng nghĩa với việc các phiên bản Mobile thường sẽ sâu hơn nhiều so với thằng anh em bên Web của nó, nên có thể bạn sẽ phải tap thêm 3,4 lần nữa, đi sâu thêm 1,2 level nữa để tới được 1 phần thông tin / tính năng nhất định.
Điều này nghĩa là người dùng sẽ phải tap nhiều hơn, nhưng cũng không sao hết. Đó là điều không thể tránh khỏi: Nếu muốn xem cùng 1 lượng thông tin trên 1 màn hình nhỏ hơn, bạn sẽ hoặc là phải tap nhiều hơn, hoặc là phải scroll nhiều hơn. Miễn là người dùng vẫn cảm thấy tự tin rằng mình đang đi đúng hướng, thì họ vẫn sẽ tiếp tục đi thôi.
Tuy nhiên, đây là thứ cần lưu ý:
KHÔNG NÊN HY SINH TÍNH KHẢ DỤNG (TRẢI NGHIỆM NGƯỜI DÙNG) KHI GẶP PHẢI CÁC VẤN ĐỀ LIÊN QUAN TỚI KHÔNG GIAN THIẾT KẾ.
(Cảm ơn Manikandan Baluchamy vì quan điểm này.)
Chuyện nuôi tắc kè hoa
Khúc hùng ca của quan điểm 1-bản-design-cho-mọi-loại-màn-hình có lịch sử lâu đời, trong đó có cả những hi vọng tươi sáng, những lời hứa lèo, và cả 1 hội cả designer lẫn developer ai cũng khổ sở te tua.
Nếu có 2 điều tôi có thể nói với bạn về các bản thiết kế áp dụng được cho nhiều màn hình (hay còn gọi là các Bố cục năng động (Dynamic layout), các Thiết kế lỏng (Fluid design), các Thiết kế thích ứng (Adaptive design), hay Thiết kế tương tác (Responsive design)), thường chúng sẽ:
- Tốn cực nhiều công sức làm - Rất khó để làm cho chuẩn chỉ
Trong quá khứ, các Design kiểu tương tác - 1 phiên bản thiết kế mà trông vẫn sang xịn mịn trên nhiều màn hình thiết bị - chỉ là 1 sự lựa chọn, bạn thích thì làm không thích thì thôi. Nó nghe có vẻ là 1 ý hay, nhưng rất ít người thực sự để tâm tới điều đó. Còn giờ đây khi mà các màn hình di động kích cỡ nhỏ lên ngôi, thì ai cũng phải để tâm tới nó: Nếu bạn có 1 trang Web, bạn buộc phải thiết kế sao cho nó trang Web đó có thể xem được trên mọi kích cỡ màn hình.
Mấy ông Dev đã ngộ ra từ rất lâu rằng, cố gắng tạo ra các phiên bản khác nhau của bất cứ thứ gì, là con đường ngắn nhất dẫn tới bệnh thần kinh. Nó tăng gấp đôi công việc cho họ và chắc chắn là cả 2 bản đều sẽ không được cập nhật thường xuyên, hoặc là cái này không trùng khớp với cái kia.
Vấn đề này vẫn đang được giải quyết. Vì vấn đề ảnh hưởng trực tiếp tới lợi nhuận của công ty, nên sẽ có các phương án kĩ thuật, dù mất thời gian.
Hiện tại, thì có 3 gợi ý như sau:
- Cho phép chức năng Zooming: Nếu bạn không có đủ lực để làm phiên bản Mobile xịn sò cho trang Web của bạn, và bạn cũng không làm Responsive, thì ít nhất bạn cũng nên đảm bảo trang Web của mình có khả năng cho phép người ta xem được thông tin ngay cả trên 1 thiết bị mobile. Không có mấy
điều trên đời này khó chịu hơn việc mở 1 trang Web trên điện thoại của bạn và thấy rằng nó không thể zoom to lên được để đọc thông tin (Nói thế thôi, còn 1 tỷ thứ khác khó chịu hơn, nhưng bạn hiểu ý tôi rồi đấy..)
- Đừng có bắt người dùng quay lại trang Homepage: Một điều cực kì phiền toái nữa: Khi tôi tap vào 1 cái link từ email hay 1 trang mạng xã hội nào đó, và cái link đó thay vì đưa tôi tới bài viết chi tiết, thì lại vứt tôi ở ngay cái trang chủ. Bắt mình phải tự tìm lại cái bài viết đó 1 lần nữa.
- Luôn luôn để 1 cái link dẫn tới trang Web “đầy đủ”: Bất kể cái bản Mobile của bạn hoành tráng và chi tiết tới mức nào, bạn vẫn phải cho người dùng 1 lối đi tới phiên bản Web, đặc biệt là khi bản Web có những tính năng hay thông tin mà phiên bản Mobile không có. (Tập quán chung hiện tại đang là để 1 cái nút Toggle Mobile/Website ở dưới cùng của mỗi trang Web)
Có rất nhiều trường hợp mà người dùng sẵn lòng zoom to ra nhỏ vào trên cái màn hình bé xíu của thiết bị di động để tiếp cận cái tính năng mà họ quen dùng, hoặc để làm thứ họ cần làm. Bên cạnh đó cũng có người thích xem phiên bản Web khi sử dụng tablet 7 inches khi chuyển sang chế độ ngang (landscape mode)
Đừng giấu Đặc tính tương tác của bất kì thứ gì
Đặc tính tương tác (affordance) là những ký hiệu thị giác trong thiết kế / cấu trúc của 1 vật thể, những ký hiệu này sẽ giúp người dùng hiểu được cách sử dụng vật thể đó. (Tôi nhắc tới các ký hiệu thị giác này ở chương 3.
Nhớ cái câu chuyện về Tay nắm mở cửa và cuốn sách của Don Norman không? Chính ông ấy đã phổ thông hóa thuật ngữ này trong xuất bản đầu tiên của cuốn “The Design of Everyday Things” vào năm 1988 và cộng đồng thiết kế trên toàn thế giới đã nhanh chóng tiếp thu thuật ngữ đó)
(Đen đủi thay, cái cách mà cộng đồng sử dụng nó không hẳn là đúng với cách mà tác giả muốn. Ông ấy đã xác minh điều này trong lần xuất bản mới của cuốn “The Design of Everyday Things” bằng cách đề nghị chuyển thuật ngữ thành “Dấu hiệu nhận biết” (Signifier) thay vì Đặc tính tương tác (Affordance), nhưng có lẽ đã quá muộn để bắt ông thần đèn này quay trở lại chiếc đèn. Mặc dù có lỗi với tác giả, có lẽ tôi vẫn sẽ phải dùng từ khóa Đặc tính tương tác trong cuốn sách này vì (a) Người ta vẫn quen với từ khóa này hơn và (b) sửa lại hết thì thực sự là nhức đầu lắm.)