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.

Landing on the page

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

Landing page trong web design, để bắt đầu với LPO

(Ảnh: Landing Tourism, nguồn Internet)

Đối với dân làm marketing online thì landing page (hay micro site) là những thứ quá quen thuộc từ lâu. Còn với web developer, web designer thì ở Việt Nam, nhiều người vẫn còn “lơ tơ mơ” chưa rõ ràng. Như đã nói trong một vài blog về web design, và gần đây là “message match” thì landing page được làm ra với mục đích quan trọng nhất là hướng khách hàng trực tuyến…mua hàng (hay làm theo những gì bạn muốn).

Vậy định nghĩa landing page rõ ràng và ngắn gọn hơn là gì? Nói một cách đơn giản, landing page có thể là bất cứ trang web nào mà người dùng “hạ cánh” sau khi bấm vào banner quảng cáo, links hoặc call to action (CTA) từ một trang web khác. Cho dù bạn quảng cáo hay đặt liên kết ở đâu, landing page là điểm đến sau cùng mà bạn muốn user của mình tập trung thao tác trên đó. Chính vì vậy, landing page cần được thiết kế độc lập với trang web chính thức của doanh nghiệp, chỉ có thông điệp và một nút bấm call-to-action (CTA) duy nhất.

A landing page can be any page that someone lands on after clicking on an online marketing call-to-action.

Landing page thường được thiết kế với 02 mục đích chính:

Thu thập thông tin khách hàng (thông qua những chương trình tặng ebook, voucher miễn phí, đăng ký thành viên/hội viên miễn phí) nhằm phục vụ mục đích kinh doanh trong tương lai. Một dạng capture lead landing page.
Hâm nóng thông tin sản phẩm, dịch vụ đối với những khách hàng tiềm năng trước khi tiến tới bán hàng trực tiếp cho họ. Đây còn gọi là “warm-up” landing page.

Từ hai mục đích chính như trên, landing page được chia ra làm 02 loại tương ứng:

Lead generation page. Là một trang landing page đơn giản, với thông điệp + hình ảnh đi kèm và bên cạnh đó là 1 form để điền thông tin với 1 nút call-to-action kêu gọi người dùng hành động (thường là đăng ký thành viên, đăng ký nhận email dạng newsletter, download tài liệu, đặt hàng…). Bên marketing còn gọi đây là micro-site landing page.
Click through page. Thông thường đây chính là một landing page phức hợp của bạn. Người dùng phải click qua nhiều trang, tự khám phá trước khi đến trang mua bán một sản phẩm nào đó. Một số tài liệu gọi là Main site landing page.

Home page và landing page

Có khá nhiều nhầm lẫn, cũng như nghi vẫn của stake holder, nghĩa là những người đi thuê web agency thiết kế website / landing page cho marketing campaign của họ. Cho dù là mục đích gì, thì home page và landing page vẫn cần được hiểu tách biệt. Home page dùng cho nhiều mục đích khác nhau như giới thiệu doanh nghiêp, giới thiệu sản phẩm, dịch vụ, giới thiệu danh sách khách hàng, liên hệ mua hàng..v.v… nhưng landing page thì chỉ dùng cho một mục đích và một campaign mà thôi.

Vậy trong thực thế landing page thường phục vụ những campaign nào? theo thống kê thì landing page (vơi 2 mục đích chính nêu trên) thường dùng vào các sự kiện như:

Làm survey thông qua online community.
Chia sẻ ebook, RSS từ blog của cá nhân, tổ chức.
Giới thiệu sản phẩm mới, điều hướng cho người dùng pre-order hoặc đăng ký dùng thử.
Bán vé của các sự kiện như âm nhạc, talk show…
Broadcast hoặc online training
Kêu gọi đăng ký thành viên, khách hàng dùng thử dịch vụ (dạng trial customer)
.v.v…

Từ khi khái niệm landing page ra đời, dân marketing và UX cũng đã “chịu khó” khai thác và áp dụng triệt để. Ngày nay còn có lĩnh vực gọi là LPO (Landing Page Optimization) nhằm tối ưu hóa các thiết kế của landing page sao cho đạt hiệu quả cao nhất. Thực ra thì cũng không có gì cao siêu cả. Tôi sẽ trình bày LPO kỹ lưỡng hơn vào các blog sau. Blog này chỉ để over view cho bạn ngắn gọn + tương đối đầy đủ về landing page. Có chuyên gia còn đưa ra cụm từ: NSAMCWADLP (viết tắt của Never Start A Marketing Campaign Without A Dedicated Landing Page) nhằm nêu lên tầm quan trọng của landing page. Cá nhân tôi không thích cho lắm. Ngày nay landing page quan trọng, nhưng có thể thiết kế, sử dụng linh hoạt và phù hợp với từng hoàn cảnh khác nhau.

Ghi chú:

(1) LPO: Landing Page Optimization. Tối ưu trang landing page để tăng doanh thu, hiệu quả từ quảng cáo/bán hàng trực tuyến.

Message match

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

Landing page conversion 1st thinking

(Ảnh: Ad Message “match” với landing page. Nguồn: Inernet)

Thử tưởng tượng rằng một ngày nọ, khi bạn đang lướt facebook hay lướt web (đại loại thế) và nhìn thấy vài banner quảng cáo về cuốn sách mới ra mắt, hay 1 chiếc điện thoại giảm giá. Bạn click vào banner đó. Và rồi trang web hiện ra nhưng nội dung của nó chẳng liên quan gì nhiều tới thông điệp mà bạn vừa nhìn thấy trên banner quảng cáo kia. Kết quả là bạn phải tự dò tìm cái bạn cần. Confuse? Và chưa chắc bạn đã mua sản phẩm mà họ quảng cáo.

Cái trang web hiện ra sau khi bạn click vào 1 ad banner, gọi là landing page. Nó bắt nguồn từ khái niệm landing của máy bay, nghĩa là bạn đáp xuống một trang web mà trang web đó được thiết kế nhằm điều hướng bạn tới một mục đích tối ưu: mua hàng. (trong nhiều trường hợp khác là đăng ký thành viên, download ebook, v.v…). Cũng giống như khi bạn đi máy bay, khi chiếc máy bay hạ cánh xuống, mọi hành khách (vẫn phải ngồi trong chiếc máy bay) và chiếc máy bay được những chiếc xe ô tô điều hướng để đi vào đúng làn đường (right lane), và dừng đúng bến đỗ. Các hành khách sau đó được hướng dẫn đi đúng hành lang và lối đi định sẵn, ra khu lấy hành lý… Landing page trong web design cũng vậy. Bạn phải direct khách hàng vào đúng CTA (Call to action) button của mình.

Có nhiều sự nhầm lẫn giữa một landing page và home page của website. Phải nói luôn, đây là hai khái niệm khác nhau. Đôi khi home page của một trang web cũng được thiết kế với đầy đủ tiêu chí như một landing page, nhưng phần lớn landing page được làm ra để phục vụ cho các digital marketing campaign. Mà đã dính tới marketing campaign thì landing page thường được thiết kế sao cho chiến dịch marketing đạt hiệu quả tốt nhất. Nghĩa là loại bỏ bớt những thứ rườm ra của 1 website (thậm chí cả navigation menu) và tập trung vào nội dung chính của chương trình.

(Ảnh: mô tả message từ Ad banner match với landing page title. Nguồn Internet)

Khi landing page ra đời, điều đáng lưu ý đầu tiên đối với những người thiết kế ra nó là thông điệp, hay main text của trang web này. Main text của landing page phải phù hợp và đồng nhất với message mà những marketer sử dụng tại các kênh quảng bá khác trên internet. Khái niệm này gọi là message match. Cụ thể hơn là nếu bạn đặt một banner quảng cáo cho một chương trình giảm giá, ở shop của bạn, trên vài tờ báo điện tử, hay sử dụng Google adword thì nội dụng của banner đó phải phù hợp với nội dung chính của trang web (landing page) hiển thị sau khi người dùng click vào banner.

If you want to increase your conversion rates, and capture more leads, you need to start sending your marketing traffic to campaign-specific landing pages – Oli Gardner (Unbounce.com)

Nếu bạn xây dựng website bán lẻ, khi bạn chạy 1 marketing campaign, hay redirect người dùng vào đúng trang của sản phẩm mà bạn đang khuyến mại. Mạnh dạn gạt bỏ những menu, banner rườm rà trong landing page. Nếu chạy campaign cho một sự kiện charity hoặc event training nào đó, hãy đưa người dùng “hạ cánh” vào đúng landing page được thiết kế như một registration form. Con người vốn rất ghét những thứ vòng vo, rườm ra. Con người vốn có tính lười biếng. Tôi cũng vậy. Và khách hàng cũng vậy.

Câu truyện đơn giản có vậy thôi. Rất nhiều website vẫn mắc phải “cái lỗi nhỏ” này.

Ở một góc nhìn đơn giản hơn của UX, thì message match chính là trải nghiệm của người dùng sau khi click chuột (experience after the click), và nhiệm vụ của người thiết kế phải làm sao cho sự trải nghiệm đó thấy thoải mái, dễ dàng và không ngắt quãng.

Web Form và 11 điều cơ bản trong thiết kế

August 12, 2013 ~ binhtruong ~ Leave a comment

11 Form design patterns trong thiết kế web

(Ảnh: web form, nguồn Internet)

Nhắc tới web form thì bất cứ ai trong chúng ta (thế hệ 7x, 8x, 9x…) đều cảm thấy quá quen thuộc bởi cường độ tiếp xúc hàng ngày. Bạn login vào tài khoản Gmail, đăng ký 1 account trên 1 diễn đàn, nhập thông tin mua hàng trực tuyến (e-Commerce) hay đơn giản là cập nhật 1 status lên Facebook… tất cả đều thông qua web form. Nếu định nghĩa “nôm na” và ngắn gọn thì web form là một hoặc nhiều màn hình của hệ thống phần mềm với tập hợp các thành phần giao diện (form elements) được tổ chức lại với nhau nhằm giúp người dùng thực hiện một thao tác nào đó.

Web form phần lớn được người dùng sử dụng để nhập thông tin (sau đó sẽ chuyển thành dữ liệu lưu trữ tại máy chủ) và thực hiện thao tác giao tiếp với hệ thống phần mềm thông qua khái niệm SUBMIT (gửi thông tin về máy chủ). Hàng ngày, những người làm phần mềm web app, mobile app phải thiết kế, lập trình rất nhiều dạng web form. Vậy, một thiết kế chuẩn kiểu mẫu hoặc tương đối chuẩn cho web form sẽ gồm những gì?

Forms are designed to ensure that users can accomplish their goals successfully – Pawan Vora

Đầu tiên, người thiết kế web form cần nắm vững quan điểm rằng: web form phải được thiết kế sao cho những forms đó đáp ứng nhiệm vụ giúp người dùng thực hiện một hoặc nhiều thao tác (tác vụ) thành công với hệ thống. Ngoài ra, web form cần phải “điều hướng” người dùng theo đúng “ý đồ” mà người thiết kế mong muốn. (Ví dụ như web form điền thông tin mua hàng thì phải điền đủ địa chỉ, số điện thoại để giao dịch).

Tiếp theo, để có thể đưa ra bản thiết kế form hợp lý và hoàn thiện, những người thiết kế chuyên nghiệp và nhiều kinh nghiệm đã đưa ra 11 tiêu chuẩn mẫu (tương đối hoàn chỉnh) bao gồm:

Clear benefits. Ai cũng biết người dùng là… lười biếng, vì vậy để họ có thể điền thông tin vào 1 form nhập liệu, hãy mô tả rõ ràng mục đích và lợi ích của web form khi thiết kế. Có thể dễ thấy LinkedIn ghi rất rõ benefits cho registration form của họ là “Over 225 million professionals use LinkedIn to exchange information, ideas and opportunities“.
Short forms. Hãy cung cấp 1 form đủ ngắn, vừa phải và chỉ yêu cầu người dùng nhập những thông tin cần thiết ở mức “tối thiểu”. Nếu form quá dài, hãy chia thành nhiều steps nhỏ. Những thông tin mang tính chất “bổ sung” hoặc “có thể hữu ích” thì người dùng hoàn toàn có thể cập nhật sau khi họ có thời gian rảnh rỗi.
Logical Grouping. Nhóm những thông tin liên quan trên một form lại với nhau. Đây là ý tưởng và best practice của Yahoo. Trong những năm Yahoo mail / chat còn thống trị tại thị trường Việt Nam, chắc hẳn bạn cũng để ý được rằng Yahoo nhóm các thông tin như thông tin tài khoản, thông tin cá nhân, khôi phục bảo mật, v.v.. trên form đăng ký của họ. Điều này giúp cho người dùng dễ chịu và tư duy liền mạch trong quá trình nhập thông tin. (UX hiện nay còn gọi là mental model).
Label alignment. Label (nhãn) chính là mô tả / định danh cho các thành phần của form. Người dùng nhìn vào label, để biết mình cần điền thông tin gì trên web form của bạn. Vậy căn chỉnh label như thế nào? Thường có 03 cách phổ biến: căn trái dọc theo các form element, căn lề phải và đặt ở phía trên của các control. Có nhiều nghiên cứu, paper cho vấn đề này, chủ yếu xoay quay quá trình điều hướng của mắt người điền thông tin cũng như việc xử lý thông tin trong não. Nhưng để nói ngắn gọn hơn thì việc đặt label phía bên trên (on top) của các form control/element là tốt nhất, và giảm thiểu thời gian điền thông tin nhất.
Required field indicators. Chỉ rõ cho người dùng những thông tin cần phải điền. Đây là những thông tin bắt buộc và nếu không điền đầy đủ, người dùng sẽ không thể gửi thông tin về máy chủ. (hay nói nôm na là không thể pass that form). Cách làm đơn giản nhất là sử dụng dấu * màu đỏ bên cạnh form element.
Smart defaults. Thông tin nào có thể để giá trị mặc định thì hãy giúp người dùng điền sẵn (hoặc copy sẵn) thông tin đó. Có thể ít người để ý điều này nhưng một trong những ví dụ điển hình hay gặp nhất là khi đăng ký mua hàng trực tuyến (hoặc mua vé máy bay). Billing address và shipping address thường có tùy chọn là “copy” hoặc “setting” giống nhau. Bằng cách này người dùng không phải nhập lại 2 lần. Các trình duyệt (web browser) ngày nay cũng lưu profile của người dùng và khi cần có thể auto complete từ đó.
Forgiving format. Bỏ những định dạng dữ liệu / thông tin không cần thiết. Có một thời điền các form trên website của Mỹ, người dùng mệt mỏi nhất với định dạng số điện thoại kiểu như xxxx-xxx-xxx (4 – 3 – 3). Điều này thực sự không cần thiết. Bởi khách hàng của nước nào sẽ có mã vùng riêng của đất nước đó. Việc thể hiện số điện thoại như thế nào có thể quan trọng với bạn nhưng không quan trọng với người dùng.
Keyboard navigation. Có thể hiểu nôm na đây là phím tắt nên có trên web form. Nhu cầu này xuất phát từ thế hệ những người dùng desktop. Các phần mềm nghiệp vụ chạy trên nền windows từ trước tới nay vẫn thường có những phím tắt để giúp người dùng thao tác nhanh hơn, dùng bàn phím nhiều hơn và sử dụng chuột máy tính ít hơn. Với công nghệ javascript và cá front-end framework ngày nay thì việc bổ sung các tổ hợp phím tắt như Ctrl + S hay Ctrl + Z không quá khó khăn nữa.
Input Hints/Prompts. Đây là phần mô tả cho từng phần của 1 web form. Điều này thực sự hữu ích trong việc giúp người dùng giảm thiểu lỗi phát sinh khi nhập dữ liệu. Ví dụ hay gặp nhất là text-box password ở form đăng ký tài khoản mới với ghi chú nho nhỏ kiểu như “6 or more characters” của LinkedIn. Với các phần mềm nghiệp vụ web-base thì input hints sẽ giúp người dùng hiểu rõ hơn các form nghiệp vụ phức tạp (như tài chính, nhân sự, cổng thông tin tương tác…).
Action buttons. Website ngày nay không còn các button thô sơ dạng SAVE, SUBMIT nữa. Các nút bấm (submit button) ngày nay gọi là action buttons. Nghĩa là mô tả rõ một hành động cụ thể, kêu gọi người dùng thao tác theo đúng thứ họ mong muốn. Thay vì thiết kế các button SAVE, SUBMIT thì bạn nên sử dụng các button với nhãn ghi rõ mục đích như “Send email”, “Create new account”, “Modify calendar”, v.v… Cách làm này đảm bảo việc người dùng biết họ sẽ gửi đi thông tin nào? với mục đích gì.
Error messages. Con người không ai hoàn hảo cả, và thao tác với hệ thống phần mềm / hay thiết bị công nghệ thì không tránh khỏi những sai sót. Khi người dùng nhập sai, hệ thống cần thông báo cho họ biết. Với Error message, bạn cần lưu ý mấy điều cơ bản như: Chỉ rõ lỗi xuất phát từ đâu? và cách để sửa lỗi đó. (Nếu người dùng nhập địa chi email không đúng cách, hãy đưa cho họ một ví dụ cụ thể trong thông báo lỗi hoặc hạn chế bằng input hints đã nêu trên); Chỉ rõ vị chí form element xảy ra lỗi và không bắt người dùng phải nhập lại những thông tin mà họ đã điền đúng.

Có thể hiểu 11 tiêu chuẩn trên là 11 patterns cho việc thiết kế web form mà qua đó, ta có thể áp dụng rộng rãi với nhiều loại hình web khác nhau như e-Commerce (TMĐT), web application, v.v… Với những phần mềm nghiệp vụ được xây dựng trên nền tảng web (web based application) thì số lượng web form là rất lớn. Chính vì vậy, việc áp dụng triệt để các nguyên tắc nêu trên sẽ tăng hiệu năng sử dụng cho hệ thống phần mềm, khuyến khích người dùng tương tác tốt hơn, gắn kết và yêu thích phần mềm hơn. Và hơn hết, việc thao tác với phần mềm đơn giản, nhanh chóng sẽ mang lại lợi ích kinh tế to lớn với cả những công ty phát triển phần mềm và công ty ứng dụng nó (phần mềm đó) vào công việc kinh doanh, điều hành tổ chức.

Ghi chú:

Việc trình bày chi tiết về web form đòi hỏi một báo cáo hoặc 1 tài liệu (có thể chi tiết thành cuốn sách) có khối lượng thông tin khá lớn. Tôi sẽ mô tả chi tiết hơn từng nguyên tắc qua các bài blog và slide trong thời gian sắp tới.
Form element: các thành phần của form bao gồm text-box, combo box, drop-down list, option box, check box, v.v…

Design patterns

July 21, 2013July 21, 2013 ~ binhtruong ~ Leave a comment

Khái niệm về thiết kế mẫu trong web/application design

(Ảnh: UI patterns, nguồn Internet)

Đã từ lâu, khái niệm “design patterns” (những thiết kế mẫu) đã trở nên quá quen thuộc với những người làm trong ngành IT, cụ thể là lập trình viên, chuyên gia thiết kế phần mềm (software designer, solution architect…). Thậm chí, với nhiều người thì design pattern chỉ dành cho những level cao trong nghề IT như là team lead, technical lead hay senior developer. Trong lĩnh vực thiết kế web hay mobile application, việc áp dụng design patterns cũng rất phổ biến và phát triển rộng rãi.

Khái niệm về patterns (mô hình mẫu) được biết đến đầu tiên trong lĩnh vực kiến trúc bởi Christopher Alexander và đồng nghiệp của ông thông qua 02 tài liệu A Pattern Language (xuất bản năm 1977) và The Timeless Way of Building (Alexander, 1979). Trong đó, Alexander và đồng sự đã giải thích bản chất của pattern như sau:

Mỗi một mô hình mẫu (pattern) mô tả một vấn đề lặp đi lặp lại trong cuộc sống của chúng ta và sau đó, nó (pattern) đưa ra giải pháp cốt lõi để giải quyết vấn đề này bằng phương pháp tối ưu nhất mà ta có thể dùng đi dùng lại nhiều lần mỗi khi gặp lại vấn đề tương tự. (1)

Như vậy, design pattern tập trung vào các tình huống cụ thể, đưa ra cách giải quyết vấn đề “tốt nhất” để giúp cho những người làm thiết kế nói chung hay những web designer, software designer nói riêng biết phải làm thế nào? áp ụng ra sao và áp dụng các thiết kế mẫu khi nào là phù hợp nhất cho công việc của mình đạt hiệu quả cao.

Ngày nay, design patterns rất được ưa chuộng và áp dụng rộng rãi trong nhiều lĩnh vực của thiết kế web cũng như software engineering. Với những ngôn ngữ lập trình như Java, C# hay cả những ngôn ngữ dạng scripting như Javascript, HTML & CSS cũng có riêng cho mình những design patterns được đúc kết bởi những lập trình viên nhiều kinh nghiệm. Trong thiết kế web, để tăng khả năng usability, người ta cũng đưa ra các chuẩn mực về giao diện, bố cục như menu, navigation, form, v.v…với mong muốn đáp ứng tốt nhất những gì người dùng mong muốn.

Xét về ưu điểm, design patterns từ lâu được công nhận với những lợi ích đáng kể như đưa ra giải pháp tổng thể, chuyên biệt cũng như giúp cho qui trình thiết kế được cải thiện một cách hiệu quả, tiết kiệm thời gian và chi phí. Trong thiết kế web thì việc sử dụng các pattern mang lại lợi ích thừa kế và tái sử dụng các mẫu, bản vẽ và các tiêu chuẩn từ những thiết kế tốt. Một ví dụ dễ hình dung nhất là design pattern dành cho tính năng registration (đăng ký thành viên mới) với những chuẩn mực như: username, password, CAPTCHA, forgot password question, v.v… (cái này ai làm web designer thì nắm rất rõ). Bên cạnh đó, design patterns cũng đã trở thành ngôn ngữ chung cho những người làm trong cùng một lĩnh vực có thể dễ dàng trao đổi, làm việc với nhau theo chuẩn mực nhất định.

Vậy design patterns có phải là một phương pháp chuẩn mực tuyệt đối? Theo tôi thì đây là một khái niệm mang tính tham khảo, mặc dù nhiều patterns đã và đang trở thành “kinh điển” (kể cả với những thứ như Facebook login, Social sharing ngày nay cũng có thể xem như 1 pattern) nhưng cũng không nên vì thế mà gò bó sức sáng tạo của mình. Bản thân trong mỗi design pattern cũng có thể xuất hiện những pattern nhỏ hơn (ví dụ như CAPTCHA cũng là 1 pattern ra đời sau này để trống spam) và ngày càng có nhiều pattern mới xuất hiện qua quá trình chọn lọc, tích lũy trải nghiệm của người dùng. Những chiếc điện thoại iPhone, Android cũng là những thiết bị tạo ra một loạt các design pattern mới nhằm định vị user experience của người dùng cũng như đảm bảo tính usability của các ứng dụng phần mềm chạy trên đó (những chiếc điện thoại đó).

Áp dụng design pattern là điều nên làm, và ngay cả bạn, bạn cũng có thể tạo ra nó, những design pattern mới, hữu ích, có thể tái sử dụng nhiều lần. Bởi một lẽ thường, theo thời gian, các vấn đề mới luôn nảy sinh và luôn cần giải pháp cho nó.

Ghi chú:

(1) Trích trong cuốn A Pattern Language (Alexander et al., xuất bản năm 1977)