20:45
Unknown
Ngày nay, ngày càng nhiều những ứng dụng được đưa lên internet. Không có sự ép buộc về cầu hình hay yêu cầu cài đặt nào, những phần mềm như một mẫu dịch vụ dường như rất được thu hút. Tuy nhiên việc thiết kế giao diện ứng dụng web hay cụ thể là thiết kế web lại tập trung vào các chức năng là chủ yếu. Để hoàn chỉnh được các ứng dụng màn hình, các ứng dụng web phải đáp ứng được tính đơn giản, trực quan và dễ điều khiển, cho phép người sử dụng làm việc tốn ít sức lực và thời gian.
1. Các nhân tố giao diện theo yêu cầu
Đơn giản mà quan trọng khi thiết kế giao diện website. Càng nhiều các chức năng kiểm soát xuất hiện trên màn hình cùng một lúc thì người sử dụng sẽ phải tiêu tốn nhiều thời gian tìm ra làm sao có thể sử dụng giao diện này của bạn. Khi mà có quá ít những lựa chọn thì các chức năng sẵn có phải trở nên rõ ràng và dễ dàng tìm lướt. Đơn giản hóa giao diện không dễ , đặc biệt nếu bạn không muốn giới hạn các chức năng ứng dụng
Khi bạn click vào liên kết tìm kiếm trên hộp tìm kiếm của Kontain, một menu dọc sẽ xuất hiện. Vậy nếu bạn cần thu hẹp tìm kiếm của bạn, bạn chỉ cần sử dụng một menu để lựa chọn nội dung bạn tìm kiếm mà thôi. Giấu những lựa chọn này sẽ làm đơn giản hộp tìm kiếm
Một cách làm điều này đơn giản hơn là giấu chức năng nâng cao. Tìm các chức năng thường sử dụng nhiều nhất trên giao diện của bạn và giấu những phần còn lại. Bạn có thể làm điều đó với 1 menu và bản điều khiển kéo lên (Pop – up menu). Ví dụ, nếu thanh tìm kiếm của bạn có bộ lọc nâng cao, hay đặt chúng vào một menu thả dọc đặc biệt ở phía cuối. Nếu người sử dụng sử dụng bộ lọc này, họ có thể kích hoạt chúng bằng cách nhấn đúp chuột. Tuy vậy, việc quyết định chức năng nào nên giữ, chức năng nào giấu cũng là một nhiệm vụ không hề đơn giản, nó còn phụ thuộc vào tầm quan trọng và tần suất sử dụng của mỗi chức năng đó như thế nào.
Khi bạn click vào liên kết tìm kiếm của CollabFinder, bạn không bị chuyển sang trang mới mà thay vào đó bảng điều khiển tìm kiếm đổ xuống, cho phép bạn tìm kiếm ngay lập tức.
2. Điều khiển chuyên dụng
Việc lựa chọn đúng chức năng điều khiển giao diện cho mỗi tình huống là rất quan trọng. Mỗi tình huống khác nhau có thể được giải quyết bằng những cách khác nhau và các chức năng điều khiển nào đó có thể tốt hơn với một nhiệm vụ nhất định hơn những chức năng khác.
Ví dụ, bạn lựa chọn một ngày bằng cách sử dụng thanh sổ xuống theo ngày, tháng, năm. Tuy nhiên chức năng sổ xuống không mấy hiệu quả, khi so sánh với một bộ lọc lịch, nơi mà bạn có thể trực tiếp lựa chọn ngày mà bạn muốn. Ngoài ra bộ lọc lịch còn giúp bạn xem ngày, tháng, năm và (đặc biệt ngày làm việc và cuối tuần) dễ dàng hơn và hơn nữa còn cho phép bạn quyết định các thông tin kèm theo nhanh hơn bạn có một danh sách đổ xuống đơn giản.
Một ví dụ khác là các thanh trượt. Bạn luôn luôn thêm số bằng tay, nhưng trong trường hợp này thì bảng kiểm soát thanh trượt có thể làm hơn thế nhiều. Không chỉ dễ sử dụng – chỉ cần click và kéo – nhưng bạn có thể thấy sự lựa chọn của bạn thích hợp từ tối thiểu đến tối đa một dãy số có sẵn.
Campaing Monitor chỉ cho bạn hướng đunngs khi bạn bắt đầu xây dựng một chiến dịch email
3. Các nút nhấn “disable”
Một vấn đề của các ứng dụng web gặp phải về hình thức là tiến trình đệ trình – Submission Process. Với một mẫu đơn đơn giản, nếu bạn click nút “Submit” 2 lần hoặc nhiều hơn rất nhanh, và nó sẽ được đệ trình 2 hoặc nhiều hơn. Đó rõ ràng là một vấn đề bởi vì nó sẽ tạo ra hàng loạt bản sao của những mẫu giống nhau. Để ngăn cản việc “đệ trình bản sao” này là rất khó và nó là cần thiết nhất cho các ứng dụng Web.
Có hai chức năng có thể làm việc bảo vệ này là client-side và server-side. Chúng tôi không muốn xem xét kỹ về server-side ở đây bởi vì nó sẽ còn phải phụ thuộc vào ngôn ngữ chương trình mà bạn đang sử dụng. Điều mà bạn cần làm quan trọng là hãy kiểm tra chắc chẳn rằng trong khi các bước quá trình xảy ra có xảy ra đệ trình bản sao hay không và hay khóa nó.
Yammer làm mất chức năng của nút “Update” khi tin nhắn mới của bạn được đệ trình.
Client –side đơn giản hơn. Tất cả việc bạn phải làm là “disable” nút “Submit” vào thời điểm nó được click. Cách đơn giản nhất là thêm một JavaScript vào nút “Submit” giống như dưới đây:
<input type="submit" value="Submit" onclick="this.disabled=true" />
4. Bóng xung quanh modal windows
Thả bóng xung quanh menu phía trên và windows không phải chỉ là để gây cuốn hút. Chúng giúp menu hoặc window trở nên nổi bật với nền background bằng tăng kích thước của nó. Ngoài ra chúng còn ngăn cản sự nhiễu tạo bởi nội dung phía dưới window bằng cách bôi đen vùng xung quanh nó tạo thành 1 cái bóng.
Kỹ thuật này đã nâng 1 tầm mới so với các ứng dụng màn hình truyền thống và giúp người sử dụng tập trung nhiều hơn những gì xuất hiện trên window. Bởi vì hầu hết modal windows không dễ phân biệt so với nội dung chính như trên ứng dụng màn hình, các bóng Shadow này sẽ giúp chúng được người đọc tiếp cận gần hơn bởi window xuất hiện 3 chiều và đặt lên trên các trang.
Digg’s log-in window có một bóng dày xung quanh nó để ngăn cản sự nhiễu bởi các trang phía dưới.
Để thành công với hiệu ứng này, người thiết kế thường tạo một vật chưa với hình ảnh PNG trong suốt như hình nền và thay thế nội dung bên trong vật chứa đó với một tấm đệm đặt cách đều nhau bên các cạnh của hộp. Một lựa chọn khác là sử dụng ảnh nền với viền trong suốt và đặt hộp nội dung với bên trong hộp này được thay thế hoàn toàn. Đây chính xác là những gì Digg đã làm – Đây là bức ảnh họ đã dùng (dialog.png) và CSS họ dùng dưới đây:
(X)HTML:
<div id="container"><div style="display: block; top: 236px; opacity: 1;" class="dialog"><div class="body"><div class="content">...</div></div></div></div>
CSS:
01 | .dialog { | |
02 | position: absolute; | |
03 | left: 50%; | |
04 | margin-left: -315px; | |
05 | width: 630px; | |
06 | z-index: 100001; | |
07 | ||
08 | } | |
09 | .dialog .body { | |
10 | background: url(/img/dialog.png) 0 0; /* semi-transparent .png image */ | |
11 | padding: 40px 13px 10px 40px; | |
12 | } | |
Ngoài ra, bạn có thể sử dụng hộp JavaScript- based hoặc thả bóng với CSS3 nhưng bạn cần phải biết rằng Internet Explorer sẽ không hỗ trợ điều đó.
Window chuyển project của Basecamp có một bóng thả lớn và nhẹ giúp vùng menu nổi bật
5. Trạng thái trống rỗng cho biết bạn làm gì.
Khi bạn thiết kế một ứng dụng web, quan trọng không chỉ là kiểm tra dự liệu mẫu của nó mà còn phải đảm bảo rằng nó nhìn đẹp mắt và hiệu quả khi không có gì ở đó. Bạn nên thiết kế các trạng thái trống rỗng.
Khi không có thông tin cho một trang, một thông tin có ích giúp người sử dụng biết làm thế nào để khởi động nên được đặt vào khoảng trống đó. Ví dụ, một ứng dụng quản lý đề tài tại trang chủ có thể lên danh sách các đề tài của người dùng, nhưng nếu chưa có đề tài nào, bạn có thể cung cấp 1 liên kết tới đề tài tạo trang. Ngay cả khi nếu đã có sẵn một nút để làm điều đó trên trang thì thêm một chức năng đó cũng sẽ không làm hại gì.
Campaing Monitor chỉ cho bạn hướng đunngs khi bạn bắt đầu xây dựng một chiến dịch email
Kỹ thuật này cho phép người dùng kiểm tra dịch vụ và thực hiện tiến trình trực tiếp bằng cách sử dụng dịch vụ sau khi đăng ký. Hướng dẫn người dùng thông qua các bước đơn giản của ứng dụng có thể giúp người dùng hiểu được sự thuận lợi của ứng dụng và nó có hiệu quả hay không. Ngoài ra nó còn rất quan trọng để biển hiện sự lựa chọn tối ưu nhất cho người dùng và chỉ họ có quyền đó – Không ảnh hưởng gì nếu cho họ quá nhiều sự lựa chọn. Nên nhớ rằng người sử dụng thường muốn nhiều hoặc ít hơn một ý tưởng cụ thể về điều họ muốn nhưng họ không muốn đi vào chi tiết – họ không có thời gian và không thích thú gì chuyện đó cả.
Sử dụng trạng thái trống để kích thích người dùng và tăng sức sống cho các hoạt động, quan trọng là bạn có thể làm giảm số lượng “thụt giảm tạm thời – Drop-outs” và giúp các khách hàng tiềm năng của bạn có nhận thức tốt hơn về việc hệ thống làm việc như thế nào.
Trang mẫu đơn Wufoo’s có một thông tin lớn và thân thiện mời bạn tạo một mẫu mới nếu chưa có mẫu nào tồn tại
Posted in: Thiết kế website
