Thiết kế giao diện cho phần mềm  
 

(Post 25/04/2006) Mỗi sản phẩm phần mềm đều có một yếu tố quyết định sự lựa chọn của khách hàng, góp phần không nhỏ vào sự thành công của sản phẩm, đó là Giao diện Người dùng Đồ họa (GUI - Graphic User Interface) - bộ mặt của sản phẩm

Giao diện đồ họa

Ý tưởng về việc thao tác trực tiếp các chức năng trên màn hình ứng dụng đã mang trong nó khái niệm về giao diện đồ họa. Đây là sự chuyển đổi nội dung từ ngữ sang hình ảnh, biểu tượng, ký hiệu, màu sắc và là sự bố trí sắp xếp có thứ tự các thành phần chính, phụ sao cho chúng được xuất hiện một cách hợp lý, thuận tiện cho người dùng.

Hình ảnh và biểu tượng có tác động đến nhận thức và ghi nhớ của con người dễ dàng hơn nhiều so với những dòng văn bản. Hãy thử hình dung những biển báo giao thông chỉ có thông báo văn bản thì quả thật rắc rối vì khó quan sát từ xa; và bạn sẽ nhận ra những dấu hiệu, hình ảnh, màu sắc đã xuất hiện bấy lâu bên cạnh mình, quen thuộc đến độ bạn vô tình không nhận thấy, có ý nghĩa và thiết thực biết bao nhiêu.

Giao diện người dùng đồ họa (GUI) trong sản phẩm phần mềm như một bảng chỉ dẫn không lời, thực hiện sứ mạng mang lại sự tiện lợi, đơn giản và hiệu quả cho người dùng. Một giao diện có sự bố trí các yếu tố nội dung và hình thức kết hợp nhau một cách liền lạc, màu sắc hài hòa, tính năng thân thiện, hiển thị nhanh và dễ sử dụng không những đáp ứng được tính thẩm mỹ mà còn thỏa mãn được các yêu cầu đặc thù của người dùng. Bên cạnh đó, GUI giúp người dùng nhanh chóng nắm rõ cách sử dụng, thích ứng và giảm thời gian làm quen với ứng dụng mới. Như vậy, giao diện hấp dẫn là một lợi thế đã và đang dần chứng tỏ hiệu quả của nó trong lĩnh vực phần mềm nói riêng và trong cuộc sống hàng ngày nói chung.

Bất kỳ nhà sản xuất phần mềm chuyên nghiệp nào cũng đều chú trọng đến GUI trong qui trình sản xuất và phát triển sản phẩm của mình. Một số đặc điểm của GUI mang lại lợi ích cho người dùng như:

  • Thân thiện: người sử dụng sẽ không có cảm giác lúng túng, mất tự tin khi sử dụng chương trình vì mọi công cụ đã được hiển thị rõ ràng và sắp xếp có thứ tự theo quy trình nghiệp vụ.
  • Dễ sử dụng: mọi danh mục, thanh công cụ, biểu tượng và chữ minh họa được thiết kế gần gũi với nhận thức của người dùng, giúp họ tiếp cận nhanh mọi chức năng của chương trình.
  • Tín nhiệm: một giao diện với màu sắc, đường nét sắc sảo, nội dung rõ ràng, mạch lạc và bố trí hợp lý sẽ tạo cảm giác thoải mái và tin tưởng cho người sử dụng.

Sản phẩm đến được với người dùng, thỏa mãn nhu cầu sử dụng của họ, là tiêu chí chính của nhà sản xuất. Tuy nhiên, để đạt được điều đó, một sản phẩm phần mềm phải là tổng hợp của những nhân tố cấu thành: người lập trình, người thiết kế giao diện và cả người sử dụng.

Thiết kế GUI và bộ ba người lập trình - người thiết kế giao diện - người sử dụng Hình 1 cho khái niệm về mối quan hệ giữa người thiết kế GUI với người lập trình (coder) và người sử dụng (user). Từ người thiết kế GUI, sản phẩm được đưa ra hoạt động thông qua người lập trình sao cho dung hòa các đặc tính kỹ thuật cũng như thẩm mỹ, với mục đích cuối cùng là người dùng hoàn toàn hài lòng khi sử dụng. Như vậy, trong mỗi một thiết kế GUI có mang theo những đặc tính, yêu cầu riêng của từng chủ thể.

Người lập trình: Họ thường đặt sự tiến bộ về kỹ năng của mình lên hàng đầu bằng cách áp dụng những kỹ thuật mới vào chương trình, họ muốn nhanh chóng hoàn thành chương trình kể cả dùng những giải pháp có sẵn của các công ty khác.

Họ thường ít quan tâm đến những chi tiết như: giao diện người dùng như thế nào người sử dụng sẽ làm việc, tương tác ra sao trên sản phẩm?

Người sử dụng: Nói chung, họ không sử dụng phần mềm chỉ vì thích (game là một ngoại lệ) mà chỉ muốn hoàn thành công việc của mình một cách nhanh chóng, không phải đọc những tài liệu hướng dẫn sử dụng dài dòng hoặc luôn nhờ giúp đỡ, chí ít khi cần giúp đỡ thì phần hướng dẫn phải rõ ràng, đi ngay vào vấn đề cần giải quyết một cách nhanh chóng. Ngoài ra, chương trình cũng phải dễ cài đặt và gỡ cài đặt.

Người thiết kế giao diện: Họ phải tìm hiểu xem người sử dụng muốn gì và như thế nào (trực giác, học nhanh, dễ sử dụng) bằng ngôn ngữ của người sử dụng rồi truyền đạt tới người lập trình bằng ngôn ngữ kỹ thuật thông qua bảng thiết kế mẫu thăm dò (GUI prototype), đồng thời cũng quan tâm đến mặt mỹ thuật, màu sắc, quyết định sử dụng những hiệu ứng âm thanh, phim, hình ảnh, thông tin... phù hợp với đặc thù của dự án.

Điều này cho thấy người thiết kế giao diện gặp những khó khăn và thử thách không nhỏ trong việc thiết kế dung hòa sản phẩm để vừa dễ dàng thực hiện người lập trình, vừa thỏa mãn yêu cầu của người sử dụng.

Những thử thách đối với người thiết kế GUI

Lệ thuộc vào người lập trình: Thông thường người thiết kế sẽ tạo bố cục và sắp xếp các thành phần như hình ảnh, nút lệnh, khung, bảng... trong chương trình như Corel Draw, Photoshop, Flash, Illustrator... và hội ý với người lập trình về khả năng thực hiện. Đôi khi bản thiết kế rất đẹp, hấp dẫn nhưng không thể hiện thực được do hạn chế của công cụ xây dựng phần mềm đang thực hiện, nên đành phải chỉnh sửa lại cho phù hợp. Vì vậy, người thiết kế GUI cũng phải am hiểu phần nào về ngôn ngữ lập trình, giải pháp, cách bố trí các thành phần như theo dạng khung (frame), dạng bảng (table) hay chia cột, đồng thời cũng đưa ra giải pháp thảo luận với người lập trình để có thể đạt được giải pháp tốt nhất, hấp dẫn, dễ thực hiện, dễ sử dụng với thời gian hợp lý nhất.

Thiết kế không đúng băng thông: Đây là điểm đặc trưng của ứng dụng trên Internet. Mỗi khu vực, mỗi nước đều có băng thông khác nhau nên khi thiết kế cũng phải nghĩ đến điều này. Vì việc sử dụng quá nhiều hình ảnh, hiệu ứng, kỹ xảo... tuy hấp dẫn nhưng sẽ làm hạn chế tốc độ hiển thị. Thời gian hiển thị lâu người sử dụng sẽ cảm thấy mệt mỏi, không thích dùng và sẽ không phát huy được hết khả năng. Ngược lại, hạn chế quá nhiều hình ảnh, hiệu ứng, kỹ xảo... giao diện sẽ trở nên buồn tẻ và nhàm chán. Trước khi bắt tay vào thiết kế bạn phải tìm hiểu kỹ khách hàng của mình sẽ sử dụng ở băng thông nào để có giải pháp thật hợp lý.

Di chuyển giữa các trang màn hình trong chương trình: Bạn nên quan tâm đến cách thức trình bày những nút lệnh, menu, menu phụ (sub menu) ở vị trí hợp lý để người dùng dễ dàng thực hiện và theo dõi chúng một cách nhanh chóng và nhất quán.
Yêu cầu của khách hàng không đủ, không rõ ràng: Khách hàng của bạn đa số là người không chuyên về lập trình và kỹ thuật. Họ có thể là một doanh nghiệp hay tổ chức đoàn thể, nên khi họ đưa ra yêu cầu phần lớn là không đầy đủ, không rõ ràng, và thậm chí không biết rõ họ sẽ cần gì trong dự án mà họ muốn làm. Nên vai trò của người quan hệ với khách hàng cũng không kém phần quan trọng trong việc tư vấn, tìm hiểu và đưa ra được những giải pháp khả thi và làm thỏa mãn khách hàng. Việc phối hợp giữa người quan hệ khách hàng (Business Analist), người thiết kế giao diện đồ họa (GUI Designer) với khách hàng để lấy thông tin và đưa ra giải pháp, hình ảnh, màu sắc... ngay tại chỗ cũng là một giải pháp tốt và đáng được quan tâm.

Minh hoạ một giao diện thành công

So sánh 2 giao diện sau trên cùng một dự án:
Hình a: Rối và không phân biệt rõ phần chính, phần phụ, danh mục nhiều nơi khó điều khiển.
Hình b: Rõ ràng, thấy được mục đích và nội dung cần chuyển tải, khắc phục được những nhược điểm ở hình a.
Kỳ tới tôi sẽ giới thiệu về 'Các thành phần và giải pháp trong thiết kế GUI', mời các bạn đón đọc.

Hàng Thái Nguyên
Senior GUI/Graphic Designer
Paragon Solutions Vietnam


 
 

 
     
 
Công nghệ khác:


USB Flashdrive nhận dạng vân tayCách dùng Google hiệu quả
Cryptography – Mật mã họcDistributed computing Part 2 - Distributed Computing Application Characteristics
Facade Pattern - mẫu thiết kế giao diện chungChữ ký điện tử: Đảm bảo an toàn dữ liệu truyền trên mạng
  Xem tiếp    
 
Lịch khai giảng của hệ thống
 
Ngày
Giờ
T.Tâm
TP Hồ Chí Minh
Hà Nội
 
   
New ADSE - Nhấn vào để xem chi tiết
Mừng Sinh Nhật Lần Thứ 20 FPT-APTECH
Nhấn vào để xem chi tiết
Bảng Vàng Thành Tích Sinh Viên FPT APTECH - Nhấn vào để xem chi tiết
Cập nhật công nghệ miễn phí cho tất cả cựu sinh viên APTECH toàn quốc
Tiết Thực Vì Cộng Đồng
Hội Thảo CNTT
Những khoảnh khắc không phai của Thầy Trò FPT-APTECH Ngày 20-11