Tham dự Tech Lounge

Tham dự Tech Lounge


[Infographic] Nguyên tắc ngón tay cái trong thiết kế ứng dụng cho điện thoại

BaroTo
23/5/2014 10:4Phản hồi: 115
[Infographic] Nguyên tắc ngón tay cái trong thiết kế ứng dụng cho điện thoại
header.png

Điện thoại di động ngày nay đã quá phổ biến và trở thành vật bất li thân của nhiều người. Điện thoại không chỉ đơn thuần là công cụ nghe gọi, liên lạc giữa mọi người với nhau nữa, mà nó được tích hợp nhiều ứng dụng và trở thành vật dụng giải trí và nhiều tính năng hỗ trợ người dùng như bản đồ, đọc viết email, ….

Thiết kế những ứng dụng cho điện thoại di động cũng đòi hỏi nhiều kĩ thuật, tính toán chi tiết để chiếc điện thoại trở nên hữu dụng và sử dụng một cách dễ dàng, thuận tiện nhất. Dựa vào thói quen sử dụng điện thoại và một số đặc điểm bàn tay con người, Infographic dưới đây đưa ra một số gợi ý cho bạn khi thiết kế ứng dụng cho điện thoại di động.

Thiet-ke-ung-dung-cho-dien-thoai.jpg

Phần mở rộng: Tìm hiểu thêm về định luật Fitt


Như trong bài infographic trên có đề cập đến định luật Fitt trong thiết kế. Để hiểu rõ thêm mình xin tóm tắt ở đây. Về cơ bản, công thức định luật Fitt được tính theo khoảng cách đến mục tiêu và kích thước của mục tiêu đó. Công thức nhìn có vẻ phức tạp nhưng ý nghĩa thì lại khá đơn giản.
  1. Mục tiêu càng xa thì thời gian để tiếp cận được nó sẽ lâu hơn.
  2. Mục tiêu càng nhỏ thì thời gian để tiếp cận được với nó sẽ lâu hơn.
Khi áp dụng định luật Fitt trong thiết kế giao diện, chúng ta rút ra được 3 kinh nghiệm sau.

Kinh nghiệm 1: Kích thước của các nút bấm hoặc các phần tử tương tác phải đủ lớn để tương xứng với quảng đường cần di chuyển.


Đối với việc độ phân giải của màn hình ngày càng được nâng cao, điều đó đồng nghĩa với việc khoảng cách di chuyển của chuột trên màn hình cũng sẽ dài ra thì cách duy nhất để thỏa mãn định luật Fitt là tăng kích thước của các nút bấm. Tuy nhiên, việc tăng kích thước lại gây ra tác dụng ngược khi số lượng nút bấm quá nhiều dẫn đến chiếm hết cả màn hình. Để giải quyết vấn đề trên, ý tưởng "rubbon" đã được đưa ra. Bằng cách chia nhóm và phân loại, những nút bấm nào người dùng thao tác nhiều nhất sẽ được thiết kế với kích thước lớn, ngược lại những tác vụ người dùng ít dùng tới nút bấm sẽ được làm nhỏ hoặc ẩn đi. Ý tưởng này đã giúp giữ lại các nút bấm vừa thỏa mãn định luật Fitt vừa tiết kiệm không gian hiển thị trên màn hình.

Kinh nghiệm 2: Những tác vụ thông thường nên để gần vị trí con trỏ người dùng.


Ví dụ dễ thấy nhất để mô tả cho việc này là khi bạn click chuột phải vào màn hình desktop hay màn hình trình duyệt web, bạn sẽ thấy một menu hiện ra ngay vị trí con chuột. Tại sao nó lại hiện ngay vị trí đó? Tại sao nó không hiện ở góc trái trên cùng của màn hình? Trả lời được câu hỏi này thì bạn đã hiểu kinh nghiệm 2 là gì.

Kinh nghiệm 3: Những vị trí đặc biệt trên màn hình mà thời gian tiếp cận luôn là ngắn nhất.

Những vị trí đó chính là 4 cạnh và 4 góc của màn hình chúng ta. Nếu có ai đó bất ngờ kêu bạn đưa chuột đến góc màn hình hoặc bất kì cạnh nào thì bạn chỉ đơn giản là "phóng tay" rê chuột đến đó mà không cần phải quan tấm đến đường đi hay vị trí dừng của nó. Lý do rất đơn giản, 4 cạnh hay 4 góc là giới hạn cuối cùng của màn hình, cho dù bạn cứ tiếp tục kéo chuột thì con trỏ chuột trên màn hình vẫn ở đó thôi. Nhưng ngược lại, khi ai đó kêu bạn đưa chuột đến vị trí cách cạnh phải màn hình 5 pixel thì hẳn bạn sẽ ngồi canh từng pixel một khi di chuyển con trỏ chuột đến gần đó. Đó là lý do tại sao nút "Start" từ đời Windows XP (các đời Windows 95, 98, 2000 và ME nút Start cách các cạnh 1 pixel) lại nằm trọn ở góc trái màn hình và thanh "Finder" của Mac OS nằm cạnh trên. Đây đều là những vùng dễ tiếp cận nhất.

Quảng cáo


Tóm lại, định luật Fitt là một trong những định luật cơ bản và thú vị nhất khi bạn thiết kế trải nghiệm người dùng. Để có được một ứng dụng hoản hảo, bên cạnh thiết kế cho ứng dụng của bạn một bộ cánh đẹp (UI design - user interface) thì việc nghiên cứu trải nghiệm người dùng (UX design - user experience) sẽ tạo ra giá trị sử dụng cho bộ cánh đó. Không ai muốn sản phẩm của mình làm ra mà không người nào sử dụng đươc!

Nguồn: Visual.ly
115 bình luận
Chia sẻ

Xu hướng

Bài viết hay đấy 😆
Có anh em TT nào chỉ dùng ngón cái k?:p
nokia cho rằng ko nhỏ hơn 28x28 -> symbian đã die 😆)
@lzzz_adnguyen_zzzl nếu bạn từ sử dụng qua bàn phím TV trên Nokia 700 sẽ thấy phím nó nhỏ cỡ nào 😃) ngón út thôi chắc cũng gấp 3 lần cái phím
Yang.zeze
TÍCH CỰC
10 năm
Nút Home iPhone quá tuyệt ( không liên quan )
Yang.zeze
TÍCH CỰC
10 năm
@NguyenVu041090 Không. Mình thấy ở quán
@Yang.zeze so sánh vợ với đồ vật =)) vãi cả so sánh
Yang.zeze
TÍCH CỰC
10 năm
@kut3prince9x Tức quá thì cũng phải nói thế thôi
@quangloc999 ké *lạy lạy* 😆
Yang.zeze
TÍCH CỰC
10 năm
Mình tự hào smartphone 4'
@thegiang1234 hi LG G2 =)
@thegiang1234 Mình cũng từ hào vì cái smart 52inch :3
@Yang.zeze kinh 4' @@ , lại nut home , chac la iphone 5 roi, ghe wa
Yang.zeze
TÍCH CỰC
10 năm
@trankhacchan Ý mình không khoe là dùng iphone đâu.
iPhone chứ có phải sh hoặc mẹc đâu mà đắt tiềm quá
iPhone 4 4tr
4s 7tr
5 9tr
5s viettel 13tr
Còn galaxy note , sony z mới hơn là htc one m8..... Trên 15tr còn gì
Chã biết người khác suy nghĩ gì nữa.
Mình rất thích iphone ở điểm nhất ngoại hình ( dễ dùng 1 tay khi lái xe , biết là nguy hiểm nhưng cũng phải cần gạt 1 ngón để nghe chứ galaxy note gạt thế nào bàng 1 tay ) nhì giao diện gọn gàng dễ nhìn ( ngay cả trẻ em cũng thế ) ba nhẹ
Điện thoại bàn phím T9: phần lớn sử dụng ngón cái. Khi nào nhắn tin thì mình mới cầm bằng cả 2 tay. :p
Đt bàn phím quay tay vật lí (BlackBerry): 2 tay. 🆒
Đt màn hình cảm ứng: 2 tay. Tay phải cầm đt, tay trái dùng ngón trỏ để chọt chọt vuốt vuốt. 😁
Về kích thước màn hình thì thấy 4" là quá đủ rồi.
@LRA Do bác nói nhầm hay do mình khác người mà khi dùng màn cảm ứng mình lại cầm điện thoại bằng tay trái và dùng ngón trỏ của bàn tay phải để chạm và vuốt cơ :eek:, khi gõ chữ thì xoay bàn phím ngang rồi cầm bằng hai tay để gõ bằng 2 ngón tay cái.
@LRA bạn cầm ngược rồi trong hình nó cầm tay trái mà 😃
Em toàn cầm kiểu ngón cái và ngón giữa giữ chặt máy ( viền trên dưới ) sau đó dùng ngón trỏ dk
Dacan
TÍCH CỰC
10 năm
thì cứ ở nhà xài đi. trên đây ko thiếu người có. ko phải khoe. ai cũng biết rồi
@Dacan Bác ợ, từ ngày Voz nó ko cho tạo nick mới nữa có lẽ trẻ trâu từ bên đó tràn qua tinh tế dữ quá, hết thể loại dành comment đầu tiên rồi đến khoe của, comment gây war, đủ cả. 😔
loc689
ĐẠI BÀNG
10 năm
@Dacan chính xác nghe giọng điệu như để khoe tai đay dung iphone 5. hazzzzz
1 bài viết rất bổ ích nhg hơi khô khan, thay mấy ảnh minh họa bằng mấy con "siêu phẩm" smart phone thời điểm này thì có lẽ ae tinhte sẽ dễ "nhập tâm" hơn
Kinh ngiệm: hồi 4s thì một tay chọt chọt còn ok. Sau đó lên G2 thì hai tay, dù sao dùng một tay đc thoải mái cũng có cái lợi cái hại của nó, hại nhất là màn hình bé chơi COC ko ổn 😁 (thực ra là chơi ngu lại đổi tại màn hình nhỏ)
@xuan anh NG em thấy chơi CoC ổn thì k phải là màn hình, mà là khoản pin thôi =)), chắc chỉ fan CoC mới hiểu
@blackberry97 Tư tưởng lớn gặp nhau đây, nếu thoải mái cầy cả ngày chắc cả iPad với đt mới đủ 😁
Bây giờ cầm đt 4" khoảng 5 phút là muốn đập đt,ức chế kinh khủng.bây giờ đt dưới 5,5" dù đẹp cỡ nào cũng ko rớ vì ko thể xài được.
xài tai nghe bluetooth nên ra đường cũng khỏe.có đt thì nghe còn tin nhắn thì bỏ.chẳng ai rảnh mà dừng xe lại nhắn tin cả nên ko lo vụ xài 1 tay
@peterh mình thấy dưới 4.5" là vừa tay nhất mặc dù tay mình không hề bé
@songoku_1206 oh,chắc tại ng mình dài nên xài cái gì nhỏ nhỏ ko quen hehe
@peterh Mỗi người có 1 cách xài điện thoại khác nhau thôi sao phải chọc ngoáy thế nhỉ =)))
@peterh thật, xài điện thoại to quen rồi h cầm mấy cái dưới 5 inch hay để cạnh mấy cái 4 inch thấy nó kì kì thế nào ấy =]] =]] =]]. Tự hào xài điện thoại 6 inch =]] =]]
Mmonster
TÍCH CỰC
10 năm
với mình thì 4" - 4.5" là ok nhất, đúng nghĩa là cái điện thoại. lớn hơn thấy nó giống thiết bị giải trí có tính năng thoại😁:D
cantho_
TÍCH CỰC
10 năm
@Mmonster 4in7 or 5in là ngon đó bạn, 5in như sky870 là chuẩn khỏi nói luôn, 5in mà vẫn nhỏ gọn đẹp, tự hào 5in hd nhưng gọn như 4in5
bro tìm tòi kĩ dữ 😁
Đang dùng 4 inch sang dùng hơn 5 inch thấy to thế nnưng sau khi lượn lờ iPad thấy cái hơn 5 inch bé tý tẹo. Lại thấy 4 inch vừa tay.
Cách mình cầm smp để dùng được ngón út để back

uploadfromtaptalk1401006256077.jpg

Sent from my GT-N7100 using Tapatalk
@TYA Cũng hay dùng ngón út để back
Chỉ có đàn bà liễu yếu đào tơ mới chơi cái thể loại màn hình bé thôi. Đàn ông fải dùng loại tối thiểu 5 inch
ptl2011
ĐẠI BÀNG
10 năm
@Hoang_HaoMinh Tại sao đàn ông thì phải dùng tối thiểu 5" bạn? Giải thích dùm mình cái.
@Hoang_HaoMinh m nghĩ ai thích màng hình lớn thuong là người suốt ngày cắm đầu vào cái điên thoại. 4'' là chuẩn với nhu cầu bình thường.
@Hoang_HaoMinh Nói như bạn thì chắc iphone chỉ dành cho đàn bà (mình chẳng là fan của IP hay sam hay gì gì cả). Lấy lý do gì mà dám mạnh miệng tuyên bố đàn ông phải tối thiểu 5 inch? Cứ phải đưa cả cái "dép" lên mặt mới là đàn ông à?
@Hoang_HaoMinh Tôi thích cầm 1 cái 520 để phát wifi, 1 cái 8800 để nghe gọi, 1 cái SF3 để làm việc và khi cần màn hình lớn tôi đã có cap và Tivi.
Vậy đàn ông đàn bà nó phân biệt qua kích thước màn hình điện thoại hay phân công xã hội? Những kẻ đàn ông cầm máy >5inch mà cả ngày nghịch đ.thoại thì vai trò của họ trong xã hội là gì?
Các bác ưa màn hình lớn đừng ném đá em, em chỉ ghét cái loại đánh giá con người qua hình thức như thế thôi
36% và 49% - vậy còn lại 15 % cầm ntn?
hoangesc
TÍCH CỰC
10 năm
@TMLOVETM Dùng 3 tay trở lên hoặc không dùng tay nào 😆
@hoangesc 3 tay? không tay nào? hại não vãi 😃)
Vâng. Bác chỉ cho em có smp nào 10inch ko ạ. Em chỉ nói sơ sơ thế các bác fải tự hiểu chứ.
thieu_than
ĐẠI BÀNG
10 năm
@Hoang_HaoMinh Vây sài cái này đi. Goi dien, nt, hang khung
>infographic
>design
>comic sans

Xu hướng

Bài mới









  • Chịu trách nhiệm nội dung: Trần Mạnh Hiệp
  • © 2024 Công ty Cổ phần MXH Tinh Tế
  • Địa chỉ: Số 70 Bà Huyện Thanh Quan, P. Võ Thị Sáu, Quận 3, TPHCM
  • Số điện thoại: 02822460095
  • MST: 0313255119
  • Giấy phép thiết lập MXH số 11/GP-BTTTT, Ký ngày: 08/01/2019