Tag: UX

  • UI UX là gì? Phân biệt UI và UX?

    UI UX là gì? Phân biệt UI và UX?

    Bạn thắc mắc rằng trang web hay ứng dụng của mình dù trông rất bắt mắt, nhưng lại không thể giữ chân người xem? Đó chính là web của bạn có UI (giao diện) đẹp nhưng UX (trải nghiệm người dùng) lại kém, chưa thân thiện. Hãy cùng chúng tôi tìm hiểu UI UX là gì nhé!

    UI UX là gì? UI/UX design là gì?

    UI UX là gì?

    UI là viết tắt của từ User Interface có nghĩa là giao diện người dùng. UI bao gồm tất cả những gì người dùng có thể nhìn thấy như màu sắc, bố cục sắp xếp như thế nào, web/app sử dụng fonts chữ gì, hình ảnh trên web có hấp dẫn hay không,…

    UI UX là gì? Phân biệt UI và UX? 1

    UX là viết tắt của từ User Experience có nghĩa là trải nghiệm người dùng. UX là những đánh giá của người dùng khi sử dụng sản phẩm như có dễ sử dụng hay không, có thân thiện hay không, có dễ gây hiểu lầm chức năng hay không…

    Người làm về UX hay còn gọi là UX Designer. UX Designer sẽ nghiên cứu và đánh giá về thói quen và cách mà khách hàng sử dụng rồi đánh giá về sản phẩm website/App nào đó. Sử dụng và đánh giá ở đây đơn giản là những vấn đề: tính dễ sử dụng, sự tiện ích, sự hiệu quả khi hệ thống hoạt động.

    Mời bạn tham khảo 7 nguyên tắc thiết kế UI/UX không thể không biết!

    Phân biệt UI và UX

    UI UX là gì? Phân biệt UI và UX? 2

    UX- User Experience:

    • Công việc của các nhà kiến trúc tạo ra các tương tác vĩ mô, tập trung vào cảm nhận chung về sự trải nghiệm.
    • UX designer sẽ cần cân nhắc và đánh giá toàn bộ hành trình người dùng để giải quyết từng vấn đề cụ thể và cần đảm bảo mục tiêu chính – đó là mang lại sự trải nghiệm sản phẩm tốt nhất cho khách hàng
    • Đa phần công việc của một nhà thiết kế UX sẽ tập trung vào việc phát triển vấn đề, pain-points là người dùng trải qua, từ đó đưa ra giải pháp phù hợp. Từ đó họ sẽ nghiên cứu sâu rộng về hành vi của tệp người dùng mục tiêu, cũng như nhu cầu của họ.UX designer sẽ đưa ra hành trình người dùng với cấu trúc thông tin phù hợp và chức năng tương ứng, cuối cùng là thiết kế wireframe trước khi bắt tay vào thiết kế sản phẩm.

    UI – User Interface:

    • Nhà thiết kế UI thực hiện các tương tác vĩ mô, chú trọng vào giao diện sản phẩm, từ phần nhìn cho tới chức năng.
    • Về nhiệm vụ chủ yếu của UI, khi nhà thiết kế UX vạch ra bộ khung sườn, thiết kế UI sẽ biến những trải nghiệm này trở nên trực quan và dễ nhìn nhận. Mục đích chính của người làm UI là sẽ chú trọng đến tính thẩm mỹ và hình ảnh xuyên suốt quá trình sử dụng của người dùng, bao gồm giao diện hình ảnh, nút bấm, điểm chạm…
    • UI sẽ tập trung vào các chi tiết để đảm bảo bộ khung kế hoạch có khả thi. Trách nhiệm của họ là thiết kế nên một giao diện thật đẹp mắt nhằm đem đến một trải nghiệm tốt nhất cho người dùng.

    UI/UX cái nào quan trọng hơn?

    Thực tế để nhận biết hai định nghĩa UI và UX là điều khá khó khăn vì chúng có mối ràng buộc chặt chẽ với nhau. Có không ít cuộc tranh luận rằng UX quan trọng hơn UI hoặc ngược lại UI quan trọng hơn UX. Tuy nhiên khi bạn đã hiểu rõ ràng về hai khái niệm này bạn có khả năng dễ dàng nhận điểm giống nhau đó là cả UI và UX đều mang một mục đích đó là tạo sự thoải mái cho người sử dụng, từ đó ta có thể thấy rõ chúng có vai trò quan trọng như nhau.UI và UX cái nào quan trọng hơn?

    UI UX là gì? Phân biệt UI và UX? 3

    Một phần mềm tốt cần dung hòa giữa UI và UX, tức là cần phải có thiết kế đẹp mắt nhưng cũng phải đem đến một trải nghiệm người dùng tốt. Nếu có UI đẹp nhưng sản phẩm đó không đem lại sự hữu ích, tiện lợi cho người dùng thì cũng coi như không.Còn nếu ta tập chung vào UX, coi nhẹ phần UI thì sẽ khiến sản phẩm không được bắt mắt, từ đó không thu hút được người dùng.

  • 7 nguyên tắc thiết kế UI/UX không thể không biết!

    7 nguyên tắc thiết kế UI/UX không thể không biết!

    Chúng ta đang sống trong thời đại ngập tràn những giao diện, khi mà mỗi người dùng đều tiếp xúc và tương tác với hàng chục, thậm chí hàng trăm giao diện mỗi ngày, từ website, app cho đến các màn hình quảng cáo, máy ATM,… Những giao diện phức tạp, khó sử dụng sẽ có xu hướng bị não bộ loại trừ. Chúng ta sẽ thích dùng những sản phẩm đơn giản, dễ dùng, không cần tốn quá nhiều thời gian để làm quen, và tất nhiên cũng sẽ ưa chuộng sản phẩm đó hơn. 

    7 nguyên tắc thiết kế UI/UX không thể không biết!

    Do đó, việc thiết kế UI/UX sao cho ai cũng có thể làm quen và biết sử dụng “chỉ sau một nốt nhạc” luôn là một câu hỏi quan trọng trong quá trình phát triển sản phẩm. 

    Tối giản giao diện​

    ​Giao diện đơn giản và không gian trống hợp lý giúp người dùng dễ dàng tìm kiếm thông tin và tương tác một cách tự nhiên. Giảm thiểu sự phức tạp và tạo ra một trải nghiệm trực quan sẽ giúp tăng khả năng tương tác và sự hài lòng của người dùng.

    7 nguyên tắc thiết kế UI/UX không thể không biết!
    • Tạo một bố cục rõ ràng: Bố cục của các nội dung phải có một cấu trúc rõ ràng, logic, và loại nội dung phải phù hợp với mục đích của sản phẩm. 
    • Những thành tố trong thiết kế phải thống nhất với nhau: Một thiết kế với các nội dung và thành tố (icon, nút,…) thống nhất về thiết kế giúp người dùng dễ điều hướng, hiểu cách sử dụng, và không bị rối trong quá trình sử dụng. Ví dụ: Nếu icon “đám mây” đã được dùng để thể hiện thông tin thời tiết, thì đừng dùng nó để ám chỉ “điện toán đám mây”; khung điền thông tin trong form này được bo góc, thì trong các form khác cũng như vậy,… 
    • Đơn giản hóa các thành tố điều hướng: Chỉ thể hiện những thành tố điều hướng chính, tránh việc thể hiện quá nhiều thành tố và nội dung không quá cần thiết trên giao diện khiến người dùng bị rối và cảm thấy loạn. Việc tập trung vào một số nút điều hướng chính sẽ giúp người dùng dễ dàng xác định hành trình của mình để thực hiện một tác vụ nhất định. 
    • Giới hạn ở 01 thanh điều hướng: Giữ thanh điều hướng thống nhất xuyên suốt sản phẩm, tránh việc với mỗi giao diện lại có một thanh điều hướng khác nhau. Đánh dấu mỗi trang một cách rõ ràng, và thêm progress bar (thanh tiến độ) để thể hiện hành trình của khách hàng nếu họ phải trải qua một hành trình nhiều bước. 

    Tập trung vào tính năng

    Nếu các lập trình viên hay để ý đến yếu tố thẩm mỹ thì người truy cập để ý đến tính năng nhiều hơn bởi nó có thể giải quyết các nhu cầu tìm hiểu, tư vấn, mua sắm,… của họ. Để thiết kế UI, UX có hiệu quả, lập trình viên nên tập trung tư duy vào các tính năng cần thiết của website.

    7 nguyên tắc thiết kế UI/UX không thể không biết!

    Đặc biệt cần chú trọng tới nút CTA (Call to action) cần hiển thị ở vùng nhìn đầu tiên. Khi thiết kế nút CTA đủ hấp dẫn sẽ dễ dàng thu hút nhóm khách hàng tiềm năng, điều này giúp tăng doanh thu cho doanh nghiệp nhanh chóng.

    Trình bày nhất quán

    Nguyên tắc thiết kế UI, UX kế tiếp chính là trình bày văn bản. Điều này giúp cho thông tin được hiển thị mạch lạc và rõ ràng hơn.

    Thí dụ như, trong một bài viết luôn phải căn lề 2 bên, viết hoa chữ cái đầu dòng, đầu câu hay tiêu đề,… Đặt khoảng trắng chính xác, dấu chấm/phẩy phân chia rõ ràng,.. Ngoài ra còn có rất nhiều nguyên tắc khác để đảm bảo nội dung bài viết dễ nhìn, dễ đọc và dễ hiểu.

    7 nguyên tắc thiết kế UI/UX không thể không biết!

    Một trong những nguyên tắc thiết kế UI, UX mà bất cứ lập trình viên nào cũng nên biết đó là nội dung trên trang. Mọi thông tin đưa ra cho người dùng cần đảm bảo tính hữu ích và dễ tương tác, không cần bất cứ ai hướng dẫn.

    Bên cạnh đó, nội dung của website cần thể hiện tính đồng nhất. Lời khuyên cho các bạn là nên cập nhật những bài viết, hình ảnh và link liên kết xoay quanh từ khóa chính, tránh viết quá rộng các thông tin không cần thiết.

    Sử dụng màu sắc và hình ảnh thu hút​

    ​Màu sắc và hình ảnh đóng vai trò quan trọng trong việc thu hút sự chú ý và tạo cảm hứng cho người dùng. Sử dụng màu sắc phù hợp và hình ảnh hấp dẫn có thể tăng tương tác bằng cách tạo ra một không gian thú vị và đáng nhớ.

    Áp dụng luật Fitts

    Luật Fitts được hiểu đơn giản là các tính năng quan trọng cần được thiết kế nổi bật và sáng tạo. Bởi thực tế thì những chức năng như vậy thường gây chú ý tới người dùng và thao tác dễ dàng hơn.

    Để sử dụng luật Fitts trong thiết kế UI, UX đạt hiệu quả, bạn nên nhớ nguyên tắc là giảm khoảng cách và tăng kích thước mục tiêu. Đặc biệt là rút ngắn các bước mà người dùng cần tương tác để họ nhanh chóng tìm kiếm thứ mong muốn.

    7 nguyên tắc thiết kế UI/UX không thể không biết!

    Điểm nhấn và sự tương phản giúp tạo nên sự chênh lệch giữa các phần tử trong giao diện, làm nổi bật các yếu tố quan trọng và thu hút sự chú ý của người dùng. Sử dụng các yếu tố như kích thước, màu sắc, và kiểu chữ để tạo ra điểm nhấn và tương phản đồng thời tăng tính tương tác.

    Tích hợp chức năng tương tác​

    Việc tích hợp các yếu tố tương tác, chẳng hạn như nút bấm, thanh trượt, hoặc phần tử kéo thả, giúp người dùng tham gia vào quá trình tương tác với giao diện. Các yếu tố này không chỉ tạo ra một trải nghiệm thú vị mà còn tăng khả năng tương tác và tham gia của người dùng.

    Đảm bảo tính tương thích đa nền tảng​

    ​Thiết kế đáp ứng và tương thích trên nhiều nền tảng và thiết bị khác nhau (điện thoại di động, máy tính bảng, desktop) là điều cần thiết để đáp ứng nhu cầu của người dùng. Việc cung cấp một trải nghiệm tương tự trên các nền tảng khác nhau giúp tăng tương tác và sự tiện lợi cho người dùng.

    Sử dụng hiệu ứng chuyển động

    ​Hiệu ứng chuyển động và hoạt họa có thể tạo ra sự hấp dẫn và gây ấn tượng mạnh cho người dùng. Chúng có thể được sử dụng để tăng tính tương tác và tạo sự trải nghiệm sống động, đồng thời giúp người dùng hiểu rõ hơn về cách tương tác với giao diện.

  • Tự học figma online miễn phí

    Tự học figma online miễn phí

    Figma là gì? Làm thế nào để cài đặt và sử dụng Figma?

    Figma là công cụ thiết kế UI/ UX được ra mắt vào năm 2016. Với giao diện thân thiện và tính dễ sử dụng, Figma đã nhanh chóng nổi lên và trở thành một công cụ chuyên nghiệp để thiết kế UI (Interface User).

    Khác với các công cụ trước đây, Figma là một công cụ design trên nền tảng đám mây (cloud-based). Figma có tính năng tương tự như Sketch, tuy nhiên hỗ trợ làm việc nhóm tốt hơn (vì là cloud-based).

    Figma hoàn toàn miễn phí để có thể sử dụng ở mức cơ bản. Nếu đòi hỏi nhiều tính năng cao cấp hơn, bạn có thể đăng kí sử dụng phiên bản trả phí.

    Tự học figma online miễn phí

    Tại sao lại không dùng Adobe XD hay Illustrator?

    Mặc dù Adobe XD đang ngày càng được cải tiến một cách nhanh chóng, nhưng về tổng thể thì nó vẫn còn chưa mượt mà để làm việc trên đó. Rất nhiều công cụ còn chưa hoàn thiện và thiếu nhiều tính năng. Mọi thứ có thể thay đổi trong vài năm tới, nhưng hiện tại Sketch và Figma vẫn là tiêu chuẩn vàng cho việc thiết kế giao diện người dùng.

    • Figma cho phép nhiều người cùng thiết kế trên một Project. Khi đó, mỗi người sẽ sử dụng máy tính riêng và cùng join vào Project trên Figma.
    • Figma hoạt động nhanh, được cập nhật thường xuyên và có gói miễn phí khi mới sử dụng.
    • Dữ liệu được lưu trên hệ thống máy chủ của Figma. Chính vì vậy, bạn có thể làm việc trên máy tính khác, mọi lúc mọi nơi mà không cần phải mang theo File Design.
    • Figma thiết kế dạng Vector. Khi thiết kế xong, các Tool Designer có thể xuất ra nhiều File khác nhau như PNG, SVG, JPG,… ở mọi kích thước mà không lo bị vỡ như Photoshop.
    • Figma có khả năng quản lý cùng một lúc rất nhiều Artboards. Nếu Photoshop chỉ cho phép thiết kế trên một khung hình thì Figma lại cho phép thiết kế nhiều màn hình trên một khung hình. Nghĩa là, trên cùng một khung hình, bạn có thể thiết kế nhiều Layout cho một sản phẩm.
    Tự học figma online miễn phí 4

    Illustrator, mặc dù là một giải pháp thay thế tương đối tốt, đã không có bất kỳ thay đổi nào đối với hệ thống symbol của nó trong nhiều năm. Adobe dường như lạc lối và không biết phải làm gì tiếp.

    Ưu điểm của Figma

    • Đa nền tảng. Đa nền tảng là một trong số các ưu điểm của Figma. Figma là ứng dụng chạy trên nền web và có cả phiên bản cài đặt trên MacOs lẫn Windows. Có nghĩa là bạn có thể thiết kế bất cứ đâu bằng bất kỳ thiết bị nào thậm chí không cần cài đặt phần mềm. Chỉ cần mở trình duyệt lên và làm việc.
      App Figma không quá đòi hỏi cấu hình máy tính khoẻ, do đó đối với các bạn mới bắt đầu học hay các bạn Marketer sẽ dễ dàng chọn cho mình một thiết bị làm việc với chi phí phù hợp.
    • Làm việc nhóm hiệu quả. Figma là một công cụ browser-based, do đó mọi người trong team có thể làm việc với nhau tương tự như làm việc trong Google Docs.
    • Chia sẻ file đơn giản
    • Hỗ trợ feedback tiện lợi. Figma hỗ trợ bình luận ngay trong app, cả trong chế độ design và prototyping. Ngoài ra comment còn có thể được theo dõi thông qua Slack hoặc email.
    • Developer inspect đối tượng ngay trên file. Figma hiển thị code snippets cho từng đối tượng được chọn. Code có thể hiển thị dưới dạng CSS, dành cho iOS hay Android. Developer có thể lấy các thông số để code ngay trong file Figma
    • Lưu trữ mọi thứ online.
    • Plugin vô cùng phong phú và liên tục được cập nhật
    • Hỗ trợ quản lí phiên bản tệp (File versioning). Figma tích hợp sẵn chức năng file versioning. Chức năng này cho phép bạn lưu lại trang thái của file design bất kỳ lúc nào. Bạn, hoặc các thành viên trong team design có thể thoải mái sửa đổi mà không lo lắng về việc tracking các version.
    • Prototype tích hợp sẵn. Bạn không cần phải nhờ đến các công cụ hỗ trợ prototype như Invision hay Marvel, bạn cũng không cần phải export ra file hình để chuyển cho các bộ phận liên quan như trước đây.

    Hướng dẫn Tự học figma online miễn phí

    Vì nó là một công cụ thiết kế dựa trên nền tảng web, Figma có thể được chạy từ bất kỳ trình duyệt web nào bạn chọn. Chỉ cần đăng ký một tài khoản miễn phí tại https://www.figma.com/ là có thể bắt đầu sử dụng.

    Ngoài ra, bạn cũng có thể cài đặt Figma trên máy tính của mình. Đây là phương pháp được ưa chuộng, vì bạn có thể sử dụng phông chữ trên máy tính local của mình.

    Dưới đây là các video khóa học Figma miễn phí và chỉ ở mức độ cơ bản, nếu muốn học nâng cao, bạn có thể đăng kí theo link sau để được giảm 25% học phí: