Ebook Bộ nguyên lý GESTAL trong thiết kế website | PTIT | UIUX DesignĐã bao giờ bạn nhìn lên những đám mây trên bầu trời và tự vẽ lên cho mình những hình ảnh của một con thú quen thuộc hay một đồ vật nào đó chưa? Và đã bao giờ bạn tự hỏi rằng, tại sao chúng ta luôn liên tưởng những hình ảnh như vậy từ những đám mây không có hình dạng nhất định? Đó là bởi cách thức bộ não chúng ta vận hành theo quy luật thị giác, một quy luật được áp dụng thường xuyên trong thiết kế UI. Laura Busche, Chiến lược gia nội dung thương hiệu tại Autodesk chia sẻ rằng: “Một người thiết kế giỏi nên hiểu được sức mạnh của tâm lý học và quy luật thị giác. Điều gì sẽ xảy ra nếu ai đó nhìn vào sản phẩm thiết kế của bạn? Họ sẽ phản ứng ra sao với thông điệp mà sản phẩm gửi gắm?” Rõ ràng là, thiết kế và tâm lý có một sự kết nối chặt chẽ với nhau, và chúng có thể ảnh hưởng lẫn nhau. Các nguyên tắc quy luật thị giác Gestalt sẽ giúp chúng ta hiểu rõ và kiểm soát được những liên kết này.
Trang 1N H Ó M 3
BỘ NGUYÊN LÝ
GESTAL
Đ Ề T À I
TRONG THIẾT KẾ WEBSITE
Trang 2NỘI DUNG
THÀNH VIÊN
Đỗ Thị Bích Ngọc
B18DCPT167
Nguyễn Chính Minh
B18DCPT157
Nguyễn Thị Hậu
B18DCPT078
Nguyễn Thị Hương
B18DCPT111
Vũ Trung Hiếu
B18DCPT087
LÝ THUYẾT TRONG GIAO DIỆN THIẾT KẾ WEBSITE
TRONG THIẾT KẾ GIAO DIỆN CỦA WEBSITE
NHỮNG KẾT QUẢ ĐẠT ĐƯỢC
VÀ ĐỊNH HƯỚNG PHÁT TRIỂN
0 3
Trang 3Tóm tắt
Gestalt là một thuật ngữ tiếng Đức có nghĩa là "toàn vẹn" Các nguyên tắc
Gestalt thảo luận về cách mọi người nhìn mọi thứ bằng cách nhóm các
thành phần tương tự lại với nhau và nhận ra hình dáng/mô hình tổng thể
trước khi xem xét các thành phần và chi tiết riêng lẻ Đây là một phản ứng
tâm lý tự nhiên giúp con người nhìn nhận các yếu tố một cách có trật tự
trong một môi trường hỗn loạn
Bằng việc sử dụng các nguyên tắc này, nhà thiết kế có thể xây dựng các
giao diện website tốt hơn, giúp chúng có sự gắn kết và hấp dẫn hơn về
mặt thị giác Cuối cùng, các nguyên tắc Gestalt dựa trên ý tưởng “tổng
thể hiệu quả hơn các riêng lẻ”
Trong bài luận này, chúng ta sẽ đi qua bảy trong số các nguyên tắc
Ges-talt quan trọng nhất cho thiết kế website bao gồm: chính - phụ, sự tương
đồng, sự gần gũi, sự liên tục, đóng kín, vùng chung và điểm nhấn cùng
ứng dụng của nó trong thiết kế giao diện website
Abstract
Gestalt is a German term that roughly translates to "wholeness." Gestalt
theory discusses how people view things by grouping similar pieces
toge-ther and recognizing the overall shape/pattern before looking at
indivi-dual components and details This is a natural psychological response to
chaotic stimuli that seeks order
It is feasible to build website designs that better engage consumers and
seem more cohesive and aesthetically appealing using this psychological
understanding Finally, Gestalt design is based on the idea that the whole
is greater than the parts
We'll go through seven of the most important Gestalt concepts for
websi-te design: figure - ground, closeness, similarity, continuity, symmetry,
clo-sure and focal point with their applicability in website interface design
TỔNG QUAN
về thiết kế giao diện
WEBSITE
I
Trang 4Logo là một yếu tố đồ họa kết hợp với cách thức thể hiện nó tạo thành: một nhãn hiệu hay thương hiệu, hình ảnh đại diện cho một công ty hay các tổ chức phi thương mại, hình ảnh biểu thị một sự kiện, một cuộc thi, một phong trào hay một cá nhân, tập thể nào đó
Header
Header là tên danh mục nằm ở đầu trang,
là nơi hiển thị các danh mục con trong trang web để giúp người truy cập có thể
dễ dàng nắm bắt các thành phần và các nội dung của website cung cấp
Ở bên trong header thường có chứa các thành phần gồm Site ID, Home link, Menu định hướng, Giỏ hàng, Hộp tìm kiếm (Search box)
1.3 Các thành phần của 1 giao diện website
Thiết kế giao diện website bao gồm tất cả những gì xuất hiện trên giao
diện Website bao gồm hình ảnh, thông tin, clip, các điều hướng người sử
dụng trên website, liên kết trên web… Hay dễ hiểu hơn là tất cả những gì
người dùng nhìn thấy, trao đổi qua lại trên website (truy cập danh mục,
đặt hàng, chat online… ) khi vào trong trang web của bạn
1.1 Khái niệm về thiết kế giao diện website
Khi thiết kế web, người thiết kế không chỉ phải nghiên cứu về bố cục,
màu sắc theo yêu cầu mà còn cần có sự đầu tư tìm hiểu về thương hiệu,
thông điệp mà doanh nghiệp muốn truyền tải Một thiết kế giao diện
website tốt là giao diện vừa đảm bảo yêu cầu của khách hàng, vừa có thể
ứng dụng tốt vào thực tế và phát huy khả năng thu hút, gia tăng nhận
thức của người tiêu dùng khi họ xem website từ đầu đến cuối Thiết kế
giao diện website là một trong các khâu quan trọng, có thể nói là chiếm
đếm 50% mức độ thành công của một trang web
1.2 Đặc điểm
Trang 50 8 0 9
Thanh memu điều hướng
Danh mục thanh menu điều hướng là khu vực tập hợp các link dẫn đến các trang mục khác của website Khu vực này rất cần được thiết kế thật dễ nhìn, để người truy cập có thể nhanh chóng thực hiện thao tác để đi đến những mục
mà họ muốn
Slider
Đây là thành phần
cơ bản của website
và thường được đặt
ở phía dưới header
Slider bao gồm những hình ảnh khác nhau được cài đặt thêm nút điều hướng giúp người dùng chuyển qua các slide khác một cách dễ dàng Thiết kế slider sao cho thật đẹp và hấp dẫn bởi nó là hình ảnh đập vào mắt người truy cập đầu tiên khi vào website của bạn Slide có thể là những sản phẩm nổi bật được nhiều người yêu thích, các ưu đãi đang sẵn có, hoặc có thể là một video quảng cáo dịch vụ hay sản phẩm của doanh nghiệp bạn cung cấp
Văn bản
giới thiệu
Văn bản giới thiệu là
một câu diễn đạt về
doanh nghiệp, sản
phẩm và dịch vụ
của trang Web
cung cấp, đề cập về
“lợi ích của khách
hàng” khi sử dụng
trang web
Search box (Hộp tìm kiếm)
Search box là thành phần
cơ bản của website giúp người truy cập dùng để tìm kiếm thông tin họ muốn một cách nhanh chóng
Search box được xem là danh mục cần thiết và hầu hết các website nào
khi thiết kế cũng cần có Bởi đây là cách thể hiện được sự chuyên nghiệp
của website mỗi khi khách hàng muốn tìm kiếm nội dung hay sản phẩm
mà họ muốn trong tất cả những thông tin website đã cập nhật trước đó
1.3 Các thành phần của 1 giao diện website
1.3 Các thành phần của 1 giao diện website
Trang 60 9 1 0
Banner quảng cáo
Banner được dùng trong việc quảng cáo ví dụ như là quảng cáo sản phẩm, quảng cáo sự kiện, ưu đãi, dịch vụ,… Thông thường trong các danh mục web-site thì Banner sẽ ở dạng hình ảnh và được thiết kế để hấp dẫn sự chú ý của khách hàng Vị trí phổ biến của banner thường được đặt trên cùng của trang (trên phần header) hay ở khu vực scan column Bên cạnh đó, banner còn có thể thấy ở dưới dạng video clip như youtube
1.3 Các thành phần của 1 giao diện website
Content area
(Nội dung chính của website)
Content area là phần nội dung chính của website, phần chứa thông tin nhiều
nhất trong các danh mục Phần này nội dung cần được trình bày dễ nhìn, dễ
đọc, thông tin hay và bổ ích sẽ là một cách giữ chân khách hàng của bạn ở lại
trang web lâu hơn
1.3 Các thành phần của 1 giao diện website
Banner quảng cáo
Banner được dùng trong việc quảng cáo ví dụ như là quảng cáo sản phẩm, quảng cáo sự kiện, ưu đãi, dịch vụ,… Thông thường trong các danh mục website thì Banner sẽ ở dạng hình ảnh và được thiết kế để hấp dẫn
sự chú ý của khách hàng Vị trí phổ biến của banner thường được đặt trên cùng của trang (trên phần header) hay ở khu vực scan column Bên cạnh đó, banner còn có thể thấy ở dưới dạng video clip như youtube
Content area
(Nội dung chính của website)
Content area là phần nội dung chính của website, phần chứa thông tin
nhiều nhất trong các danh mục Phần này nội dung cần được trình bày
dễ nhìn, dễ đọc, thông tin hay và bổ ích sẽ là một cách giữ chân khách
hàng của bạn ở lại trang web lâu hơn
Footer
Danh mục website này còn được gọi là chân trang
Footers thường được đặt tại vị trí cuối cùng của trang web, hiển thị ở mọi trang của website
- Thông tin sở hữu bản quyền website
- Link liên kết
- Menu
Footer gồm:
1.3 Các thành phần của 1 giao diện website
1.3 Các thành phần của 1 giao diện website
Trang 71 2 1 3
2.2.1
Nguyên tắc chính phụ
(Figure ground)
Yếu tố 1: Kích thước của yếu tố chính khi so sánh với yếu tố phụ
Ví dụ: văn bản tiêu đề thường sẽ được sử dụng phông chữ lớn hơn văn bản nội dung
Trong trường hợp này, tiêu đề là yếu tố chính và nội dung là yếu tố phụ Tiêu đề phải nổi bật hơn so với phần nội dung chính của văn bản.
Yếu tố 2: Sự tương phản giữa chính
và phụ
Đây là lý do tại sao hầu hết các trang in sẽ sử dụng mực đen trên nền trắng Thành phần chính (văn bản) tương phản tối đa với thành phần phụ (trang giấy) Sự tương phản tạo ra
sự phân biệt rõ ràng giữa chính và phụ Tương phản càng lớn thì sự phân biệt
sẽ càng rõ ràng, nổi bật và ngược lại Sự tương phản kém gây khó nhìn, thậm chí là khó đọc
Có hai yếu tố chính ảnh hưởng đến cách chúng ta nhìn nhận hình dáng và mặt bằng trong bất kỳ thiết kế nhất định nào
Nguyên tắc chính-phụ nói rằng mọi người nhận thức một cách bản năng các đối tượng như ở tiền cảnh hoặc hậu cảnh Chúng hoặc nổi bật nổi bật ở phía trước (chính hoặc lùi vào phía sau
Gestalt (trong tiếng Đức mang nghĩa là hình dáng, hình thức) là một tập hợp của những nguyên tắc nhận thức về mặt thị giác, được phát triển bởi những nhà tâm lý học người Đức vào những năm 1920 Nó được xây dựng dựa trên lý thuyết “con người sẽ luôn
ưu tiên nhìn nhận tổng thể hơn là tập trung vào các chi tiết”
Nói ngắn gọn, lý thuyết Gestalt dựa trên các ý tưởng: khi con người nhận
thức được các vật phức tạp bao gồm nhiều yếu tố, họ áp dụng phương
pháp sắp xếp các bộ phận vào một hệ thống theo một cách có ý thức
hoặc tiềm thức có tổ chức, thay vì chỉ tập hợp các vật một cách đơn giản
BỘ NGUYÊN TẮC
GESTAL
I I
trong thiết kế
giao diện Website
2.1 Khái niệm
2.2 Các nguyên tắc trong bộ nguyên tắc Gestalt
Trang 8Ví dụ, trang chủ Basecamp có một loạt
đồ họa, văn bản, biểu mẫu và các thông tin khác Và vì nguyên tắc hình chính phụ được áp dụng, ta có thể ngay lập tức tập trung vào nội dung ở các khu vực tiền cảnh màu trắng
Kết luận
Trong thiết kế web, các yếu tố chính-phụ nên được phân biệt rõ ràng Khi thiết kế, yếu tố chính nên làm nổi bật và thu hút sự chú ý Có rất nhiều cách để làm điều này như sử dụng các nút bấm in đậm trên một nền trắng, sử dụng không gian trắng một cách hợp lí Để tạo sự khác biệt giữa chính và phụ, hãy sử dụng màu sáng, làm mờ nền, tăng tương phản màu sắc, kích thước và tập trung vào vị trí của phần tử giao diện người dùng mà bạn
Một ví dụ khác về áp
dụng nguyên tắc
chính phụ trên trang
chủ của trang web
500px.com Yếu tố
chính là một hình ảnh
lớn và chủ đạo -
nhưng nội dung có
thể nhận dạng rõ
ràng, nhờ vào việc sử
dụng cả không gian
và độ tương phản với
nền Điều này ngăn
phần nền lấn át nội
dung và gây mất tập
trung hoặc gây nhầm
lẫn cho người dùng
Lựa chọn phần không
gian trắng và sáng để
đặt chữ màu đen giúp
tăng tương phản và
vẫn khiến nội dung
2.2.2
Nguyên tắc tương đồng
(Similarity)
Nguyên tắc tương đồng nói rằng khi mọi thứ có vẻ giống nhau, chúng ta nhóm chúng lại với nhau Và chúng ta cũng có xu hướng nghĩ rằng chúng có cùng chức năng
Sự giống nhau có thể dựa trên các thông số hình ảnh khác nhau như màu sắc, hình dạng, kích thước và
2.2 Các nguyên tắc trong bộ nguyên tắc Gestalt
Màu sắc
Trong ví dụ này từ Cars.com, việc sử dụng màu sắc tương tự giúp chúng ta phân biệt giữa tiêu đề là gì, phần nội dung và đường dẫn Bằng cách sử dụng các màu sắc riêng biệt cho từng yếu tố này, người dùng dễ dàng nhận biết được nội dung của toàn bộ trang web
Trang 91 3 1 6 1 4 1 7
2.2.3
Nguyên tắc
về sự gần gũi
(Proximity)
Trong quá trình sắp xếp các loại dữ liệu đa dạng với các đối tượng xung quanh, chúng ta thường nhóm chúng lại với nhau theo một cách tự động và nhanh chóng trước khi bắt đầu tìm
Chúng ta có thể xác định hai phương diện để áp dụng nguyên tắc gần trong giao diện người dùng: đối với các yếu tố typography, văn bản và đối với các khối nội dung khác nhau và được kiểm soát
Không gian trắng, còn gọi là âm bản, đóng vai trò tuyệt đối trong quá trình này Nó cho phép người thiết kế kích hoạt sức mạnh của khoảng trống:
không gian mà không những không
có bất kì nội dung nào được đặt vào đấy, mà nó còn có thể sử dụng để sắp xếp các yếu tố thành các nhóm nếu cần thiết
Typography và văn bản
Một trong những phạm vi cốt yếu của nguyên tắc về sự gần gũi cốt yếu
là bố cục văn bản nội dung trong giao diện người dùng Khả năng quét của các khối văn bản trong bố cục là rất quan trọng Thứ nhất, hầu hết người dùng quét trang và kiểm tra các móc nối như tiêu đề, phụ đề, điểm nổi bật hoặc từ khóa và chỉ đọc
kĩ lại nếu họ cảm thấy thú vị hoặc quan tâm Vì thế văn bản cần được sắp xếp để nhận biết nhanh chóng
và có tính thẩm mỹ
Kích thước
Nguyên tắc tương đồng nhóm các
yếu tố theo kích thước là một cách
giải quyết khác trong việc tạo ra các
giao diện trực quan và thân thiện với
người dùng vì nó thiết lập cơ sở cho
hệ thống phân cấp trực quan mạnh
mẽ hỗ trợ người dùng Việc nhóm các
yếu tố nội dung tương tự theo
nguyên tắc này sẽ tạo kết nối giữa
chúng, người dùng có thể nhận biết
mức độ liên quan mà không cần đọc
hay xem hết các chi tiết
Hình dạng
Một cách nữa để nhóm các phần tử trên trang web hoặc màn hình là nhóm chúng thông qua sự tương đồng về hình dạng
Ví dụ: Các liên kết danh mục con trên Asos.com đều có dạng hình chữ nhật tròn để củng cố nhận thức của họ như một nhóm
và giao tiếp chức năng tương tự của họ là điều hướng Ngược lại, hình dạng hình chữ nhật của các bộ lọc bên dưới báo hiệu rằng nhóm đó có chức năng khác
Ảnh trên là một ví dụ về nhóm theo kích thước và màu sắc Ta có thể thấy
thanh tab các điều hướng bên trái có các yếu tố tương tác có tầm quan
trọng như nhau được đưa ra ở cùng kích thước và màu sắc trong khi yếu
tố tương tác cốt lõi là nút tải lên file mới được làm nổi bật nhờ dấu cộng
Kết luận
Việc tạo ra sự nhất quán từ đầu đến cuối trong
một thiết kế trải nghiệm người dùng sẽ khiến
sản phẩm của bạn trở nên dễ sử dụng hơn Và
để làm được điều này thì nguyên tắc sự tương
đồng trong bộ nguyên tắc Gestalt sẽ giúp các
nhà thiết kế
2.2 Các nguyên tắc trong bộ nguyên tắc Gestalt
Trang 10Khối nội dung
và cách điều phối
Tính gần có thể tác động đến trải nghiệm người dùng qua cấu trúc của các khối nội dung trong
bố cục: ngoại trừ văn bản, có thể
là hình ảnh, liên kết, icon, sự điều phối, các yếu tố kêu gọi hành động (CTA), thẻ sản phẩm, Nguyên tắc gần cho phép các nhà thiết kế sắp xếp những khối này một cách nhất quán tương ứng với khả năng thị giác nhận thức tự nhiên của con người
Nguyên tắc về gần gũi thể hiện trong UI này
với nhiều cấp độ Đầu tiên, nó hợp nhất các
dòng của một khối văn bản để cho thấy đây là
một khối thông tin thống nhất Thứ hai, mỗi
khối văn bản được đặt gần với hình ảnh mô tả
nó, vì vậy khi quét văn bản có thể hiểu rằng
phần văn bản và hình cùng thuộc một nhóm
và được trình bày thành một khối nội dung
chung Các yếu tố kêu gọi hành động (CTA),
các link liên kết cũng được thể hiện theo
nguyên tắc gần nhưng được thay đổi khác hơn
so với nội dung văn bản, nhưng vẫn đủ để
nhận thấy nó cũng được nằm trong khối nội
dung trên Vì vậy, ta có thể nhận thấy trong
trường hợp này, nhà thiết kế sử dụng tính gần
nhau bên trong và bên ngoài của cả khối nội
dung, và sắp xếp chúng một cách hài hòa với
cấu trúc tổng thể
Cách tiếp cận này cũng sử dụng tốt cho các danh sách
mở rộng như menu hoặc mục lục Tính gần gũi được sử dụng hợp lý sẽ trở thành công cụ đắc lực để sắp xếp tất cả
vị trí và nhóm chúng một cách hiệu quả
Ví dụ đây là một trang web thương mại điện tử cho một cửa hàng trang thời trang nữ Màn hình hiển thị các sản phẩm: chúng ta có thể thấy dữ liệu tổng quát của sản phẩm như hình ảnh, tên, giá tiền -chúng sẽ được đặt ở vài dòng gần nhau do đó trực giác nhìn nhận một cách tự nhiên theo một nội dung thống nhất Đồng thời, nó
mô tả chi tiết mặt hàng khá kĩ được đặt vào một khối văn bản và cách này đã phân tách một số ít thông tin từ các tập tin dữ liệu Chính vì thế, các khối nội dung không bị hợp nhất và giúp người dùng có thể dễ dàng phân biệt từ khóa dữ liệu quan trọng từ mô tả chi tiết đó
Kết luận
Trong các giao diện người dùng, khi có nhiều nội dung khác nhau thì nguyên tắc gần sẽ giúp người thiết kế sắp xếp bố cục để người dùng có thể quét được và
dễ dàng tiếp nhận hơn Vốn dĩ người dùng không sẵn sàng bỏ thời gian để học cách sử dụng những giao diện phức tạp, vì vậy với màn hình trực quan có thể quét nhanh chóng sẽ là cơ hội
để giữ chân người dùng và cung cấp cho họ những tính năng tốt nhất mà trang web hoặc ứng dụng mang lại
1 6