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.
NHÓM ĐỀ TÀI BỘ NGUYÊN LÝ GESTAL TRONG THIẾT KẾ WEBSITE NỘ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 01 TỔNG QUAN VỀ LÝ THUYẾT TRONG GIAO DIỆN THIẾT KẾ WEBSITE B Ộ N G U Y Ê N TẮ C G E S TA L TRONG THIẾT KẾ GIAO DIỆN CỦA WEBSITE 02 03 TỔNG KẾT NHỮNG KẾT QUẢ ĐẠT ĐƯỢC VÀ ĐỊNH HƯỚNG PHÁT TRIỂN TÀ I L I Ệ U T H A M K H Ả O 03 04 I Tóm tắt Gestalt thuật ngữ tiếng Đức có nghĩa "tồn vẹn" Các ngun tắc Gestalt thảo luận cách người nhìn thứ cách nhóm thành phần tương tự lại với nhận hình dáng/mơ hình tổng thể trước xem xét thành phần chi tiết riêng lẻ Đây phản ứng tâm lý tự nhiên giúp người nhìn nhận yếu tố cách có trật tự môi trường hỗn loạn Bằng việc sử dụng nguyên tắc này, nhà thiết kế xây dựng giao diện website tốt hơn, giúp chúng có gắn kết hấp dẫn mặt thị giác Cuối cùng, nguyên tắc Gestalt dựa ý tưởng “tổng thể hiệu riêng lẻ” Trong luận này, qua bảy số nguyên tắc Gestalt quan trọng cho thiết kế website bao gồm: - phụ, tương đồng, gần gũi, liên tục, đóng kín, vùng chung điểm nhấn ứng dụng thiết kế giao diện website TỔNG QUAN thiết kế giao diện WEBSI T E Abstract Gestalt is a German term that roughly translates to "wholeness." Gestalt theory discusses how people view things by grouping similar pieces together and recognizing the overall shape/pattern before looking at individual 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 website design: figure - ground, closeness, similarity, continuity, symmetry, closure and focal point with their applicability in website interface design 04 05 1.1 Khái niệm thiết kế giao diện website 1.3 Các thành phần giao diện website Thiết kế giao diện website bao gồm tất xuất giao diện Website bao gồm hình ảnh, thơng tin, clip, điều hướng người sử dụng website, liên kết web… Hay dễ hiểu tất người dùng nhìn thấy, trao đổi qua lại website (truy cập danh mục, đặt hàng, chat online… ) vào trang web bạn Header Header tên danh mục nằm đầu trang, nơi hiển thị danh mục trang web để giúp người truy cập dễ dàng nắm bắt thành phần nội dung website cung cấp Ở bên header thường có chứa 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) Logo 1.2 Đặc điểm Khi thiết kế web, người thiết kế nghiên cứu bố cục, màu sắc theo u cầu mà cịn cần có đầu tư tìm hiểu 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 giao diện vừa đảm bảo yêu cầu khách hàng, vừa ứng dụng tốt vào thực tế phát huy khả thu hút, gia tăng nhận thức người tiêu dùng họ xem website từ đầu đến cuối Thiết kế giao diện website khâu quan trọng, nói chiếm đếm 50% mức độ thành công trang web 06 Logo yếu tố đồ họa kết hợp với cách thức thể tạo thành: nhãn hiệu hay thương hiệu, hình ảnh đại diện cho công ty hay tổ chức phi thương mại, hình ảnh biểu thị kiện, thi, phong trào hay cá nhân, tập thể 07 1.3 Các thành phần giao diện website 1.3 Các thành phần giao diện website Văn giới thiệu Thanh memu điều hướng Danh mục menu điều hướng khu vực tập hợp link dẫn đến trang mục khác website Khu vực cần thiết kế thật dễ nhìn, để người truy cập nhanh chóng thực thao tác để đến mục mà họ muốn Văn giới thiệu câu diễn đạt doanh nghiệp, sản phẩm dịch vụ trang Web cung cấp, đề cập “lợi ích khách hàng” sử dụng trang web Search box (Hộp tìm kiếm) Search box thành phần website giúp người truy cập dùng để tìm kiếm thơng tin họ muốn cách nhanh chóng Search box xem danh mục cần thiết hầu hết website thiết kế cần có Bởi cách thể chuyên nghiệp website khách hàng muốn tìm kiếm nội dung hay sản phẩm mà họ muốn tất thông tin website cập nhật trước 08 Slider Đây thành phần website thường đặt phía header Slider bao gồm hình ảnh khác cài đặt thêm nút điều hướng giúp người dùng chuyển qua slide khác cách dễ dàng Thiết kế slider cho thật đẹp hấp dẫn hình ảnh đập vào mắt người truy cập vào website bạn Slide sản phẩm bật nhiều người u thích, ưu đãi sẵn có, video quảng cáo dịch vụ hay sản phẩm doanh nghiệp bạn cung cấp 09 1.3 Các thành phầnphần 1của giao diệndiện website 1.3 Các thành giao website Contentarea area Content (Nội dung website) (Nội dung website) 1.31.3 CácCác thành phần củacủa giao diện website thành phần giao diện website Bannerquảng quảngcáo cáo Banner Banner dùng việc quảng cáo ví dụ quảng cáo sản Banner dùng việc quảng cáo ví dụ quảng cáo sản phẩm, phẩm, quảng cáo kiện, ưu đãi, dịch vụ,… Thông thường danh quảng cáo kiện, ưu đãi, dịch vụ,… Thông thường danh mục webwebsitesẽ thìở Banner ởảnh dạng vàkế thiếtdẫn kế để sitemục Banner dạng hình vàhình đượcảnh thiết để hấp sựhấp chúdẫn ý ý khách hàng Vị trí phổ biến banner thường đặt khách hàng Vị trí phổ biến banner thường đặt trang trang header) hay Bên khu vực scan Bêncó (trên phần header) hay (trên khuphần vực scan column cạnh đó, column banner cịn banner cịn dạng video clip youtube thểcạnh thấy đó, dạng video clipthấy ởyoutube Footer Danh mục website gọi chân trang Footers thường đặt vị trí cuối trang web, hiển thị trang website Content area phần nội dung website, phần chứa thơng tin nhiều danh mục Phần nội dung cần trình bày dễ nhìn, dễ đọc, thơng tin hay bổ ích cách giữ chân khách hàng bạn lại trang web lâu Content area phần nội dung website, phần chứa thơng tin nhiều danh mục Phần nội dung cần trình bày dễ nhìn, dễ đọc, thơng tin hay bổ ích cách giữ chân khách hàng bạn lại trang web lâu 1009 Footer gồm: - Thông tin sở hữu quyền website - Link liên kết - Menu 1110 II BỘ NGUYÊN TẮC GES TA L 2.2 Các nguyên tắc ngun tắc Gestalt Ngun tắc chính-phụ nói người nhận thức cách đối tượng tiền cảnh hậu cảnh Chúng bật bật phía trước (chính lùi vào phía sau thiết kế 2.2.1 Nguyên tắc phụ (Figure ground) Có hai yếu tố ảnh hưởng đến cách nhìn nhận hình dáng mặt thiết kế định giao diện Website 2.1 Khái niệm Gestalt (trong tiếng Đức mang nghĩa hình dáng, hình thức) tập hợp nguyên tắc nhận thức mặt thị giác, phát triển nhà tâm lý học người Đức vào năm 1920 Nó xây dựng dựa lý thuyết “con người ln ưu tiên nhìn nhận tổng thể tập trung vào chi tiết” Kích thước yếu tố so sánh với yếu tố phụ Yếu tố 1: Ví dụ: văn tiêu đề thường sử dụng phông chữ lớn văn nội dung Trong trường hợp này, tiêu đề yếu tố nội dung yếu tố phụ Tiêu đề phải bật so với phần nội dung văn Nói ngắn gọn, lý thuyết Gestalt dựa ý tưởng: người nhận thức vật phức tạp bao gồm nhiều yếu tố, họ áp dụng phương pháp xếp phận vào hệ thống theo cách có ý thức tiềm thức có tổ chức, thay tập hợp vật cách đơn giản 12 13 Yếu tố 2: Sự tương phản phụ Đây lý hầu hết trang in sử dụng mực đen trắng Thành phần (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 phân biệt rõ ràng phụ Tương phản lớn phân biệt rõ ràng, bật ngược lại Sự tương phản gây khó nhìn, chí khó đọc Ví dụ, trang chủ Basecamp có loạt đồ họa, văn bản, biểu mẫu thông tin khác Và ngun tắc hình phụ áp dụng, ta tập trung vào nội dung khu vực tiền cảnh màu trắng Một ví dụ khác áp dụng nguyên tắc phụ trang chủ trang web 500px.com Yếu tố hình ảnh lớn chủ đạo nội dung nhận dạng rõ ràng, nhờ vào việc sử dụng không gian độ tương phản với Điều ngăn phần lấn át nội dung gây tập trung gây nhầm lẫn cho người dùng Lựa chọn phần không gian trắng sáng để đặt chữ màu đen giúp tăng tương phản khiến nội dung 2.2 Các nguyên tắc nguyên tắc Gestalt 2.2.2 Nguyên tắc tương đồng (Similarity) Nguyên tắc tương đồng nói thứ giống nhau, nhóm chúng lại với Và có xu hướng nghĩ chúng có chức Sự giống dựa thơng số hình ảnh khác màu sắc, hình dạng, kích thước Màu sắc Kết luận Trong ví dụ từ Cars.com, việc sử dụng màu sắc tương tự giúp phân biệt tiêu đề gì, phần nội dung đường dẫn Bằng cách sử dụng màu sắc riêng biệt cho yếu tố này, người dùng dễ dàng nhận biết nội dung toàn trang web Trong thiết kế web, yếu tố chính-phụ nên phân biệt rõ ràng Khi thiết kế, yếu tố nên làm bật thu hút ý Có nhiều cách để làm điều sử dụng nút bấm in đậm trắng, sử dụng không gian trắng cách hợp lí Để tạo khác biệt phụ, 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 tập trung vào vị trí phần tử giao diện người dùng mà bạn 14 15 Kích thước 2.2 Các nguyên tắc nguyên tắc Gestalt Nguyên tắc tương đồng nhóm yếu tố theo kích thước cách giải khác việc tạo giao diện trực quan thân thiện với người dùng thiết lập 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 yếu tố nội dung tương tự theo nguyên tắc tạo kết nối chúng, người dùng nhận biết mức độ liên quan mà không cần đọc hay xem hết chi tiết 2.2.3 Nguyên tắc gần gũi (Proximity) Trong trình xếp loại liệu đa dạng với đối tượng xung quanh, thường nhóm chúng lại với theo cách tự động nhanh chóng trước bắt đầu tìm Ảnh ví dụ nhóm theo kích thước màu sắc Ta thấy tab điều hướng bên trái có yếu tố tương tác có tầm quan trọng đưa kích thước màu sắc yếu tố tương tác cốt lõi nút tải lên file làm bật nhờ dấu cộng Hình dạng Kết luận Việc tạo quán từ đầu đến cuối thiết kế trải nghiệm người dùng khiến sản phẩm bạn trở nên dễ sử dụng Và để làm điều nguyên tắc tương đồng nguyên tắc Gestalt giúp nhà thiết kế 31 Một cách để nhóm phần tử trang web hình nhóm chúng thơng qua tương đồng hình dạng Ví dụ: Các liên kết danh mục Asos.com có dạng hình chữ nhật tròn để củng cố nhận thức họ nhóm giao tiếp chức tương tự họ điều hướng Ngược lại, hình dạng hình chữ nhật lọc bên báo hiệu nhóm có chức khác Typography văn Một phạm vi cốt yếu nguyên tắc gần gũi cốt yếu bố cục văn nội dung giao diện người dùng Khả quét khối văn bố cục quan trọng Thứ nhất, hầu hết người dùng quét trang kiểm tra móc nối tiêu đề, phụ đề, điểm bật từ khóa đọc kĩ lại họ cảm thấy thú vị quan tâm Vì văn cần xếp để nhận biết nhanh chóng có tính thẩm mỹ Khơng gian trắng, cịn gọi âm bản, đóng vai trị tuyệt đối q trình Nó cho phép người thiết kế kích hoạt sức mạnh khoảng trống: khơng gian mà khơng khơng có nội dung đặt vào đấy, mà cịn sử dụng để xếp yếu tố thành nhóm cần thiết 41 Chúng ta xác định hai phương diện để áp dụng nguyên tắc gần giao diện người dùng: yếu tố typography, văn khối nội dung khác kiểm soát Khối nội dung cách điều phối Tính gần tác động đến trải nghiệm người dùng qua cấu trúc khối nội dung bố cục: ngoại trừ văn bản, hình ảnh, liên kết, icon, điều phối, 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 nhà thiết kế xếp khối cách quán tương ứng với khả thị giác nhận thức tự nhiên người 16 Kết luận Nguyên tắc gần gũi thể UI với nhiều cấp độ Đầu tiên, hợp dòng khối văn thấy khối thông tin thống Thứ hai, khối văn đặt gần với hình ảnh mơ tả nó, qt văn hiểu phần văn hình thuộc nhóm trình bày thành khối nội dung chung Các yếu tố kêu gọi hành động (CTA), link liên kết thể theo nguyên tắc gần thay đổi khác so với nội dung văn bản, đủ để nhận thấy nằm khối nội dung Vì vậy, ta nhận thấy trường hợp này, nhà thiết kế sử dụng tính gần bên bên khối nội dung, xếp chúng cách hài hòa với cấu trúc tổng thể 18 Cách tiếp cận sử dụng tốt cho danh sách mở rộng menu mục lục Tính gần gũi sử dụng hợp lý trở thành công cụ đắc lực để xếp tất vị trí nhóm chúng cách hiệu Trong giao diện người dùng, có nhiều nội dung khác nguyên tắc gần giúp người thiết kế xếp bố cục để người dùng quét dễ dàng tiếp nhậ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 giao diện phức tạp, với hình trực quan qt nhanh chóng hội để giữ chân người dùng cung cấp cho họ tính tốt mà trang web ứng dụng mang lại Ví dụ trang web thương mại điện tử cho cửa hàng trang thời trang nữ Màn hình hiển thị sản phẩm: thấy liệu tổng quát sản phẩm hình ảnh, tên, giá tiền -chúng đặt vài dòng gần trực giác nhìn nhận cách tự nhiên theo nội dung thống Đồng thời, mơ tả chi tiết mặt hàng kĩ đặt vào khối văn cách phân tách số thơng tin từ tập tin liệu Chính thế, khối nội dung khơng bị hợp giúp người dùng dễ dàng phân biệt từ khóa liệu quan trọng từ mơ tả chi tiết 19 2.2 Các nguyên tắc nguyên tắc Gestalt 2.2 Các nguyên tắc nguyên tắc Gestalt 2.2.4 2.2.5 Nguyên tắc liên tục (Continunity) Não nhìn thấy nhóm thành phần nhóm lại thành đường, mong đợi đường tiếp tục theo Ví dụ: Điều khiến bạn dễ dàng theo dõi đường Google Maps? Câu trả lời đường tuyến tính Chủ yếu đường tuyến tính đánh dấu đường Google Maps Nó giúp tâm trí dễ dàng theo dõi làm tăng chức Google Maps Ở đây, người ta thấy nguyên tắc nhận thức Gestalt tác động trực tiếp đến giao diện Nguyên tắc Gestalt tính liên tục ứng dụng có giá trị thiết kế Nó dẫn mắt người dùng thụ động theo hướng định Quy luật liên tục tâm lý học hoạt động công cụ để điều hướng trang web Trong thiết kế web, nguyên tắc nhận thức Gestalt sử dụng cho điều hướng phụ Kết luận Nguyên tắc thường kết hợp với thiết kế logo, ảnh hưởng đến định thiết kế trực quan khác liên quan đến biểu tượng phần tử trang khác Biểu tượng giao diện Ví dụ: Google Trang trình bày áp dụng ngun tắc đóng cho biểu tượng Biểu tượng truyền đạt chức thông qua thiết kế trực quan tối giản Ngun tắc đóng kín (Closure) Ngun tắc đóng kín nói người điền vào chỗ trống để cảm nhận đối tượng hoàn chỉnh kích thích bên ngồi phù hợp phần với đối tượng Mặc dù việc sử dụng nguyên tắc đóng đơn giản hóa độ phức tạp trực quan biểu tượng, phải kiểm tra xem người dùng có hiểu biểu tượng đại diện hay không tăng cường biểu tượng nhãn rõ ràng Nếu người dùng không hiểu ý nghĩa biểu tượng, dù tối giản hay đẹp mắt mặt thẩm mỹ khơng cịn quan trọng Quy luật liên tục tâm lý học sử dụng theo nhiều cách Nó đặc biệt hữu ích cho mục đích xây dựng thương hiệu trang web để tạo trải nghiệm người dùng tốt 20 21 Nội dung bổ sung tín hiệu Đảm bảo phần tử phân đoạn giao tiếp với tổng thể Ví dụ: Google Trang trình bày áp dụng ngun tắc đóng cho biểu tượng Biểu tượng truyền đạt chức thông qua thiết kế trực quan tối giản Các nhà thiết kế sử dụng nguyên tắc đóng kín để: - Chỉ nội dung bổ sung tồn - Khuyến khích tương tác với nội dung nói Khơng phải lúc sử dụng nguyên tắc đóng có hiệu Khi cắt bỏ nội dung phần tử trang, cân nhắc xem phần tử hiển thị hình liệu có đủ để truyền đạt giá trị chức hay không Việc cung cấp q thơng tin khiến người dùng khó điền vào chỗ trống Nhiều thiết kế băng chuyền tận dụng ngun tắc đóng kín chúng hiển thị phần mặt hàng danh sách Mặc dù người dùng khơng đốn chi tiết xác mặt hàng hiển thị phần (mặt hàng bị khuất phần bên phải), mặt hàng bị khuất báo hiệu cho họ biết có nhiều mặt hàng khác ngồi hình họ biết kéo chuột sang trái để tiếp cận chúng VD: HelloFresh, dịch vụ đăng ký bữa ăn, sử dụng nguyên tắc đóng cửa để báo hiệu băng chuyền cho người dùng Tuy nhiên, yếu tố phân đoạn nhỏ dễ bị bỏ sót Kết luận Mặt khác, trang xuất hoàn chỉnh cho người dùng, người dùng gặp phải gọi ảo tưởng hoàn chỉnh Áp dụng nguyên tắc đóng kín để ngăn chặn ảo tưởng hồn chỉnh có nghĩa phân đoạn phần tử trang hình để chúng khơng hồn chỉnh khuyến khích tương tác (cuộn vuốt) Kỹ thuật hoạt động tốt ngữ cảnh có kích thước cửa sổ xem dự đốn được, khó triển khai nhiều có nhiều kích thước cửa sổ có 22 Khi trình bày đối tượng thơng tin khơng đầy đủ, người có xu hướng điền vào chỗ trống Là nhà thiết kế, áp dụng nguyên tắc đóng cửa để đơn giản hóa yếu tố trực quan giao tiếp (và khuyến khích tương tác với) thông tin bổ sung 23 2.2 Các nguyên tắc nguyên tắc Gestalt 2.2.6 Nguyên tắc vùng chung (Comon region) Các yếu tố có xu hướng nhận thức thành nhóm chúng chia sẻ khu vực có ranh giới xác định rõ ràng Nguyên tắc vùng chung mạnh mẽ áp đảo hầu hết yếu tố khác, bao gồm gần gũi Trong hình đây, menu điều hướng chồng lên nội dung, vùng chứa thiết lập rào cản ngăn cách chúng với Việc sử dụng vùng chunggiúp tạo hệ thống phân cấp trực quan Hình ảnh cho thấy phần header footer khoanh vùng màu sắc khác biệt so với xung quanh Quy luật vùng chung liên quan đến gần gũi Mẫu thẻ UI ví dụ cách nguyên tắc khu vực chung sử dụng thiết kế Trong hình trên, thơng tin đặt thẻ nên người ta cho có liên quan đến Việc sử dụng vùng chứa giúp tạo hệ thống phân cấp trực quan Hình ảnh cho thấy phần header footer khoanh vùng màu sắc khác biệt so với xung quanh Kết luận Để áp dụng nguyên tắc vùng chung vào thiết kế giao diện người dùng, người ta thêm đường viền xung quanh phần tử (hoặc nhóm mục), tách khỏi phần tử xung quanh 24 Ví dụ: Các thẻ đây, bóng mờ tinh tế đường viền nhìn thấy rõ ràng tạo ấn tượng đối tượng riêng lẻ 25 2.2 Các nguyên tắc nguyên tắc Gestalt Thiết kế yếu tố tạo điểm nhấn 2.2.7 Nguyên tắc điểm nhấn (Focal point) + Dòng: Nhiều nhà thiết kế sử dụng dịng tuyến tính cụ thể để xác định hướng tổng thể trang Khi bạn thay đổi luồng này, bạn thu hút ý đến điểm trang mà luồng bị hỏng Ví dụ: thiết kế bạn sử dụng đường kẻ ngang bạn ngắt mẫu sử dụng đường kẻ dọc, bật điểm cần ý + Hình dạng: Nếu bạn sử dụng nhóm hình giống Nhấn mạnh chiến lược nhằm thu hút ý người xem vào yếu tố thiết kế cụ thể Đó khu vực nội dung, hình ảnh, liên kết nút, v.v Thông thường, sử dụng nhấn mạnh để thúc đẩy lời gọi hành động (ví dụ: nút đăng ký, mua hàng đăng nhập, v.v.) trang (chẳng hạn hình chữ nhật), việc sử dụng hình dạng khác (chẳng hạn hình trịn) thu hút mắt + Màu sắc: Sự thay đổi màu sắc tạo điểm nhấn thiết kế Sự thay đổi tương phản, điểm địi hỏi ý người xem Sự tương phản nhẹ nhàng thu hút ý từ khu vực sang khu vực Lựa chọn màu sắc bạn phải phù hợp với cách bạn muốn người dùng tiếp tục trang bạn Sự tương phản màu sắc lớn ấn tượng làm cho mắt họ “nhảy”; thay đổi nhẹ nhàng cho phép họ di chuyển nhàn nhã hơn, bạn giữ luồng thơng tin bình tĩnh +Kết cấu: Bạn sử dụng kết cấu thiết kế trang web để thu hút ý đến phần tử Ví dụ: bạn sử dụng hiệu ứng dập để nhấn mạnh vùng văn Hoặc, ví dụ khác, bạn sử dụng đổ bóng để làm cho khu vực bật trang +Khối lượng: Bạn sử dụng màu sắc hình dạng để gợi ý “độ nặng” Ví dụ: sử dụng phần tử màu tối trang sáng màu có khả nhấn mạnh phần tử màu tối so với phần cịn lại nội dung Bạn thấy điều dòng tiêu đề tiêu đề nội dung văn hầu hết trang web 26 27 Các nguyên tắc thiết kế tạo điều kiện cho nhấn mạnh 01 02 CÂN BẰNG SỰ GẦN GŨI Cân bằng: Việc sử dụng cân đối xứng mang lại trọng lượng cho đối tượng sử dụng thiết kế Tuy nhiên, việc phá vỡ cân cách sử dụng xếp không đối xứng yếu tố thu hút ý đến nơi xảy cân Điểm cân hữu ích cho bạn với tư cách nhà thiết kế; nơi bạn nên nghĩ đến việc chèn hình ảnh thơng điệp có giá trị Theo tâm lý học Gestalt, quy luật gần gũi nói nhận thức yếu tố gần nhóm Nếu bạn tách phần tử khỏi nhóm đó, bạn thu hút ý đến 04 CĂN CHỈNH 03 LẶP LẠI Lặp lặp lại yếu tố thiết kế thiết kế khiến mắt nhìn theo yếu tố Nó đặc biệt chỗ bạn có tập hợp yếu tố Con mắt người dùng theo dõi thiết kế, chấp nhận tính trật tự lặp lại khi, dần dần, họ nhận thấy điều khác biệt Bạn sử dụng lặp lại để thu hút ý vào khu vực cụ thể hình Đó khơng gian mở mà bạn chèn thơng điệp 28 Các yếu tố chỉnh thiết kế cung cấp luồng đơn giản để mắt theo dõi Thông thường điều với văn nội dung Ví dụ: Người dùng thích văn chỉnh hợp lý; họ khơng thích phải nhảy xung quanh từ dòng sang dòng khác từ cuối bị chọc vào lề Nếu bạn thêm phần tử không chỉnh, bạn thu hút ý người dùng vào Mắt người thích theo dõi đường, lối mịn dọc theo nhìn thấy Ngay bạn phá vỡ trình tự đó, thị giác muốn biết sao! Các nguyên tắc thiết kế tạo điều kiện cho nhấn mạnh 06 05 TƯƠNG PHẢN Các nhà thiết kế thường sử dụng tương phản cách tinh tế thiết kế mình, hai khu vực tương phản hồn tồn với nhau, mắt bị thu hút sang khu vực khu vực khác Bạn sử dụng điều để thu hút ý đến hai hành động cụ thể (một hai hành động nâng cao mục tiêu người tạo trang web) Ví dụ: bạn muốn tạo tài khoản mua sản phẩm Tuy nhiên bạn phải hiểu màu phối tốt với để phù hợp với độ tương phản mà bạn muốn Lời kêu gọi hành động muốn có độ tương phản mạnh (chẳng hạn nút xanh lam / tím vàng) thơng thường khu vực “Bạn có biết?” KHOẢNG TRẮNG Chúng ta sử dụng để thu hút ý đến khu vực Hầu hết thiết kế sử dụng lượng không gian trắng quán (hãy nhớ khoảng trắng không thiết phải màu trắng - màu nào) phép dòng chảy trực quan qua nội dung Bằng cách tăng khoảng trắng xung quanh khu vực, bạn phá vỡ dịng chảy thu hút ý người xem Ví dụ: Là trang web sử dụng khoảng trắng để giới thiệu sản phẩm, Apple thiết lập tiêu chuẩn để xây dựng khoảng nghỉ vào thiết kế họ Trong ví dụ này, Apple khơng thực tốt khoảng trắng chủ động toàn trang web cách đặt hình ảnh chiến lược để thu hút người dùng ý đến yếu tố trang, mà trang web sử dụng khoảng trắng thụ động để hướng dẫn người dùng thông qua nội dung mà không gặp trở ngại 29 TỔNG KẾT 01 Kết đạt Hiểu việc thiết kế giao diện website khơng dừng lại việc nắn nót pixel hay đồ hoạ hút Thực tế, thiết kế phải dựa vào tính giao tiếp, kết nối thuận lợi cho người dùng Như với nguyên tắc tâm lý nào, học cách kết hợp nguyên tắc nhận thức trực quan Gestalt vào công việc thiết kế cải thiện đáng kể trải nghiệm người dùng Hiểu cách não người hoạt động sau khai thác khuynh hướng tự nhiên người để tạo tương tác liền mạch khiến người dùng cảm thấy thoải mái trang web, lần họ truy cập Các nguyên tắc Gestalt tương đối dễ kết hợp vào thiết kế nhanh chóng nâng cấp thiết kế lộn xộn Những nguyên tắc quy luật thị giác Gestalt áp dụng để đạt mục tiêu trên, mang đến trải nghiệm dễ dùng cho người sử dụng mang lại thành công lớn cho doanh nghiệp MAKE IMPACT Hạn chế Nghiên cứu guyên tắc Gestalt thực tế lĩnh vực rộng liên quan tới tâm lý hành vi người dùng Vì phạm vi luận chưa có đủ thời gian để nghiên cứu tồn nguyên tắc Gestalt tính ứng dụng chúng thiết kế giao diện website Định hướng phát triển Định hướng phát triển nhóm tiếp tục có nghiên cứu sâu rộng nguyên tắc Gestalt khác nguyên lý thực hiện, đồng thời áp dụng kết lý thuyết tìm hiểu vào làm cuối kỳ môn học thiết kế website sau để đảm bảo tính ứng dụng luận Trên kết luận nhóm rút sau trình làm luận Tuy cố gắng nhiều không tránh khỏi sai sót việc nghiên cứu mong nhận bảo ý kiến đóng góp giáo để khố luận hồn thiện Trân trọng cảm ơn! 30 Tài liệu tham khảo Koffka, K (2014) Principles Of Gestalt Psychology Mimesis International Ph.D Weinschenk, Susan (2011) 100 Things Every Designer Needs to Know About People New Riders Pub Tidwell, J (2019) Designing Interfaces: Patterns for Effective Interaction Design O'Reilly Media 31 NHÓM ... thấy, trao đổi qua lại website (truy cập danh mục, đặt hàng, chat online… ) vào trang web bạn Header Header tên danh mục nằm đầu trang, nơi hiển thị danh mục trang web để giúp người truy cập dễ dàng... ởyoutube Footer Danh mục website gọi chân trang Footers thường đặt vị trí cuối trang web, hiển thị trang website Content area phần nội dung website, phần chứa thông tin nhiều danh mục Phần nội... hội để giữ chân người dùng cung cấp cho họ tính tốt mà trang web ứng dụng mang lại Ví dụ trang web thương mại điện tử cho cửa hàng trang thời trang nữ Màn hình hiển thị sản phẩm: thấy liệu tổng