website đẹp bằng giao diện người dùng tốt

Nền tảng của giao diện người dùng

Written by thietkewebsite on October 25, 2013. Posted in Lập trình website

Một số trang web tốt hơn những người khác dù được thiết kế website, cho dù trong nội dung, khả năng sử dụng , thiết kế , tính năng của họ, vv chi tiết của thiết kế tương tác và hình ảnh động làm cho một sự khác biệt cơ bản trên các trang web hiện đại . Chúng tôi sẽ chia sẻ một số bài học rút ra từ các mô hình khác nhau và phân tích lý do tại sao các mô hình đơn giản làm việc rất tốt . Khi chúng tôi thiết kế các sản phẩm kỹ thuật số , chúng ta thường sử dụng các ứng dụng thiết kế như Photoshop và bức phác thảo . Hầu hết những người đã được trong kinh doanh cho một vài năm rõ ràng là biết rằng thiết kế là nhiều hơn chỉ là về trình bày trực quan . Tuy nhiên, nhiều người tiếp tục tạo dáng tĩnh . Steve Jobs đã nói về thiết kế : ” Nó không phải chỉ là những gì nó trông giống như và cảm thấy như thế nào. Thiết kế là cách hoạt động . ” Kinh nghiệm và ấn tượng của chúng ta về một sản phẩm được hình thành bởi sự kết hợp của các yếu tố , với sự tương tác đóng vai trò cơ bản . Không lâu nữa chúng ta có thể nghĩ đến giao diện người dùng như thiết kế tĩnh và thêm sự kỳ diệu của sự tương tác sau này. Thay vào đó, chúng ta cần phải nắm lấy bản chất tương tác của các web ngay từ đầu và nghĩ về nó như thành phần tự nhiên . Chúng ta hãy xem xét một số ví dụ trong đó tương tác thông minh , xác định bởi hoạt hình tinh tế , nhẹ nhàng cải thiện trải nghiệm người dùng . cuộn phim hoạt hình cho các website tạo miễn phí Phước lành và lời nguyền của thiết kế Web là các siêu liên kết . Khi bạn bấm vào một liên kết, nó có thể đưa bạn bất cứ nơi nào , từ một trang sản phẩm cho các trang web của các cửa hàng con rối cũ đáng sợ xuống đường phố . Kết quả là một mất mát của bối cảnh . Một trong những điều tuyệt vời về kinh nghiệm người dùng của cuốn sách là tuyến tính . Mỗi chương trong một cuốn sách được xây dựng trên cùng . Bạn phải đọc chương một trong một mồi về kinh tế để hiểu chương hai . Khi bạn bỏ qua một chương , bạn biết rằng bạn có thể bỏ lỡ một cái gì đó và , do đó , thiếu một số kiến thức về các nội dung tiếp theo. Trên mạng, và đặc biệt là trên các trang web dài, điều này thường xảy ra trong tiềm thức . Bằng cách thêm vào một hình ảnh động di chuyển , chúng ta có thể khắc phục điều đó : So sánh với điều này : So sánh hành vi mặc định của ” tên ” liên kết neo với các hành vi hoạt hình . Bỏ qua nội dung không phải là một hành động vô thức nữa , đó là một quyết định. Trong thực tế, hy vọng nằm ở 24 khung hình mỗi giây có một nút trình đơn để xem điện thoại di động của mình mà gửi cho bạn để trên cùng của trang, mà không cần bất kỳ hình ảnh động . Nó đã cho tôi nhiều hơn một phút để tìm ra những gì thực sự xảy ra . Takeaway: thay đổi đột ngột trong một giao diện rất khó cho người dùng để xử lý . Không để chúng trong bóng tối, luôn luôn hiển thị những gì đang xảy ra. stateful Bật tắt Như chúng ta đã thấy trong ví dụ cuối cùng , quá trình chuyển đổi giúp người dùng hiểu tốc độ và lưu lượng của một giao diện . Không có gì cảm thấy không tự nhiên hơn so với một sự thay đổi đột ngột , vì những thay đổi đột ngột chỉ không tồn tại trong thế giới thực. Hãy xem xét một ví dụ khác : menu chuyển đổi . Người sử dụng kết hợp các biểu tượng “cộng thêm” với tác động của việc thêm nội dung hoặc mở rộng một phần tử. Bằng cách quay nó bằng 45 ° , cộng trở nên ngang, một yếu tố giao diện sử dụng rộng rãi để có nghĩa là “gần gũi” : Quá trình chuyển đổi đơn giản này hoàn toàn thay đổi ý nghĩa của biểu tượng. Một chi tiết nhỏ có nghĩa là sự khác biệt giữa việc phải đoán những gì sẽ xảy ra tiếp theo và biết những gì các biểu tượng có nghĩa là một trong hai nhà nước . Mà chuyển đổi là khá thân thiện, nếu bạn hỏi tôi . Ngoài ra, lưu ý rằng dấu cộng luôn luôn quay theo hướng tương tự như nội dung , tăng cường dòng chảy của thông tin . Takeaway : Làm cho yếu tố trang web của bạn có thể hiểu được trong mỗi tiểu bang . Các hình thức sụp đổ và Bình luận Các hình thức bình luận trên nhiều blog và các trang web tin tức không phải là yếu tố hạnh phúc nhất – tìm kiếm . Tại sao? Vâng, hầu hết trong số đó là không chính xác thân thiện , phải không? Khi bạn đã sẵn sàng để viết bình luận , bạn chỉ muốn bắt đầu gõ những nhận xét riêng của mình và không có gì khác . Thay vào đó, một hình thức điển hình yêu cầu bạn tất cả các loại công cụ khác đầu tiên . Nó gây phiền nhiễu . Để động viên mọi người bình luận hơn , chúng tôi có thể thu gọn hình thức và chỉ hiển thị các yếu tố quan trọng nhất : các lĩnh vực bình luận . Khi người dùng nhấp chuột vào lĩnh vực này, bạn có thể mở rộng các hình thức phù hợp. Một ví dụ thực tế thế giới công bố tiến bộ này có thể được tìm thấy trên trang web phiên bản beta của tờ New York Times : Bạn có thể thực hiện việc này hơn nữa bằng cách thiết lập sự tập trung của con trỏ đến lĩnh vực bình luận khi các hình thức mở rộng . Cách tiếp cận này có một vấn đề, bởi vì một nguyên tắc quan trọng của thiết kế tương tác là một hành động nên luôn luôn xảy ra gần nơi xảy ra sự tương tác ( gần địa điểm của sự chú ý ) . Chúng ta có thể đi một bước xa hơn , sau đó , và động lĩnh vực bình luận để định hướng người sử dụng: Bạn thậm chí có thể pin lĩnh vực bình luận lên hàng đầu , mở rộng nó cho phù hợp và hiển thị các trường bổ sung bên dưới nó . Như bạn có thể thấy, điều này làm giảm sự lộn xộn và làm cho các hình thức bình luận hấp dẫn hơn . Nhưng những gì về sự sụp đổ tất cả các ý kiến ​​trước đó , quá ? Bởi sự sụp đổ các ý kiến, chúng tôi nhận được thanh cuộn để đại diện cho chiều dài của bài báo đó , thay vì toàn bộ trang . Một thực tế phổ biến là để tự động nạp ý kiến ​​khi người dùng đến dưới cùng của trang . Chúng ta nên tránh ép buộc người sử dụng click trừ khi có một lý do thực sự tốt để . Takeaway: Từng bước tiết lộ nhằm giảm các thành phần giao diện người dùng để bản chất của họ . Tiết lộ các tính năng như người sử dụng cần họ . Để kéo Làm mới Một trong những sự tương tác thú vị nhất xuất hiện ngay sau khi sự ra đời của iPhone đã được ” kéo để làm mới , ” đi tiên phong của Loren Brichter . Nó cho phép người sử dụng cập nhật nội dung ngược thời gian cuộn. Bạn có thể thấy khái niệm này trong hành động trong ứng dụng của Twitter . Một khi bạn đã cuộn để trên cùng của dòng tweet của quý vị , di chuyển xa hơn một chút để làm mới dòng . Tại sao không làm việc này rất tốt? Trước khi kéo để làm mới tồn tại , người dùng phải nhấn nút Refresh trên trình duyệt của họ để tải nội dung hơn . Bằng cách kết nối mong muốn của người dùng tìm kiếm nội dung hơn với các hành động làm mới , sự cần thiết phải hành động rõ ràng đã trở thành lỗi thời. Takeaway: Bằng cách kết nối với ý định hành động , kinh nghiệm trở nên liền mạch hơn . dính Nhãn Nhãn dính cũng là một sự kết hợp tinh tế nhưng hữu dụng của một thành phần giao diện người dùng và một quá trình chuyển đổi có ý nghĩa. Kiểm tra việc sử dụng kỹ thuật này Edenspiekermann trong danh mục đầu tư của mình . Các cuộn nhãn dự án cùng với các nội dung, do đó cung cấp bối cảnh cho những hình ảnh bên phải , cho đến khi dự án tiếp theo sẽ xuất hiện. Hành vi này là tương tự như của sổ địa chỉ trong iOS và đặc biệt hữu ích cho việc cung cấp bối cảnh trong phần dài . Quá trình chuyển đổi cung cấp cả việc định hướng và mịn thiệu dựa trên bối cảnh . Takeaway: Sử dụng các nhãn dính cho phần dài, trong đó mô tả hoặc tiêu đề thêm thông tin có giá trị cho nội dung không phù hợp trong khung nhìn . affordance chuyển tiếp Các khái niệm về affordance xuất phát từ tâm lý học nhận thức và đề cập đến đặc điểm cụ thể của một đối tượng mà hướng dẫn người xem . Trong bối cảnh thiết kế giao diện người dùng , khả năng sử dụng các thuật ngữ (PDF) của trang web của EU định nghĩa nó như sau: ” Một affordance là địa điểm mong muốn của một giao diện người dùng – . Phần mềm mà tự nhiên làm cho người ta thực hiện các bước chính xác để thực hiện mục tiêu của mình ” Rặng núi thường được sử dụng để nâng cao affordance . Rặng núi xung quanh một nút gợi ý rằng các nút có thể được thao tác . UX kỹ thuật này đã được phổ biến rộng rãi bởi các ứng dụng máy ảnh trong iOS . iOS_Lockscreen -500 kết màn hình khóa iOS 6 của đặc trưng gợn sóng xung quanh các biểu tượng máy ảnh , cho thấy draggability . Apple loại bỏ nó trong iOS 7 , rõ ràng bởi vì người dùng đã quen với nó, làm cho các biểu tượng trông giống như một nút độc lập bây giờ . Điều gì xảy ra vẫn như nhau, mặc dù: Khi bạn kéo nút , màn hình khóa bị trả lại lên , để lộ máy ảnh bên dưới . Đây là một kỹ thuật tuyệt vời để trỏ người dùng đến các tính năng trong một giao diện . Takeaway : Cung cấp cho các yếu tố một affordance cao trỏ người dùng đến các tính năng trong một giao diện .