Thiết kế giao diện website và mobile cho cửa hàng bán thức ăn trực tuyến bằng Figma

MỤC LỤC

CHUẨN BỊ VÀ PHÂN TÍCH YÊU CẦU 1. Xác định mục tiêu thiết kế

  • Nghiên cứu và phân tích đối tượng sử dụng 1 Theo độ tuổi
    • Lập kế hoạch thiết kế giao diện 1 Xác định mục tiêu thiết kế

      - Cải thiện trải nghiệm người dùng: Giao diện được tối ưu hóa cho thiết bị di động sẽ giúp người dùng dễ dàng tìm kiếm thông tin, thực hiện các hành động mong muốn và có trải nghiệm tốt nhất khi sử dụng website hoặc ứng dụng trên thiết bị di động. - Tăng hiệu quả sử dụng: Giao diện được thiết kế phù hợp với sở thích thời trang của người dùng sẽ giúp họ dễ dàng tìm kiếm thông tin, mua sắm sản phẩm và trải nghiệm dịch vụ một cách hiệu quả, từ đó tăng tỷ lệ chuyển đổi và thu hút khách hàng tiềm năng.

      THIẾT KẾ GIAO DIỆN

      Sơ đồ usecase tổng quát và đặc tả usecase cho từng màn hình phía người dùng (client)

      • Đặc tả từng màn hình .1 Đăng nhập

        Post-condition - Tìm kiếm sản phẩm thành công : nếu tìm kiếm sản phẩm thành công thì hệ thống sẽ chuyển sang giao diện sản phẩm tìm được hiển thị màn hình ứng với kết quả tìm kiếm. Actor Khách hàng Trigger Người dùng chọn thêm sản phẩm vào giỏ hàng tại trang cửa hàng sau đó chọn mua sản phẩm sẽ hiện thông tin chi tiết của sản phẩm Pre-condition Người đã hoặc chưa đăng nhập tài khoản với hệ thống.

        Mô tả thành phần và trình bày bản thiết kế hoàn chỉnh cho từng trang (client)

        • Sản phẩm (Component)

          Khi bấm “đăng nhập” sẽ chuyển sang màn hình đăng nhập thành công Khi bấm “đăng kí” sẽ chuyển sang màn hình giao diện đăng kí. Tạo Rectangle và Text: Vẽ hình chữ nhật bằng công cụ Rectangle, thêm văn bản vào hình chữ nhật bằng công cụ Text. Tạo Rectangle và Text: Vẽ hình chữ nhật bằng công cụ Rectangle, thêm văn bản vào hình chữ nhật bằng công cụ Text.

          Tạo Rectangle và Text: Vẽ hình chữ nhật bằng công cụ Rectangle, thêm văn bản vào hình chữ nhật bằng công cụ Text. Tạo Rectangle và Text: Vẽ hình chữ nhật bằng công cụ Rectangle, thêm văn bản vào hình chữ nhật bằng công cụ Text. Bước 2: Tạo các chữ “Khôi phục mật khẩu thành công”, “Mật khẩu của bạn đã được khôi phục thành công” bằng công cụ text.

          B2 trong rectangle trên tạo 1 avatar người dùng(kết hợp hình ảnh copy vào cùng với 1 hình tròn , sử dụng use as mark để đưa hình ảnh vào hình tròn) , 1 logo shop B3 tạo trường nhập liệu tìm kiếm sản phẩm với text “Tìm kiếm sản phẩm” cùng với 1 icon “ kính lúp” để nhấp vào ra trang sản phẩm tìm kiếm. B5 tạo các danh sách sản phẩm bằng cách sử dụng rectangle làm 1 cái khung sau đó ta thêm hình ảnh sản phẩm vào đồng thời bo góc thêm text tên sản phẩm ứng với hình ảnh sản phẩm đó sau đó là tạo 1 ractangle hình tròn đồng thời cho icon dấu “+” nằm trong hình tròn đó sau đó để nó trên viền của phần dưới khung sản phẩm ( sự dụng bring to front ). Tạo Rectangle và Text: Vẽ hình chữ nhật bằng công cụ Rectangle, thêm văn bản vào hình chữ nhật bằng công cụ Text.

          Sơ đồ usecase tổng quát và đặc tả usecase cho từng màn hình phía người quản trị (admin)

          • Đặc tả usecase admin .1 Thống kê

            Hệ thống sẽ hiển thị màn hình thay đổi thông tin người dùng và hiển thị ra các thông tin cần nhập để cập nhập ( sửa). Hệ thống sẽ hiển thị màn hình thay đổi thông tin người dùng và hiển thị ra các thông tin cần nhập để cập nhập ( sửa). Hệ thống sẽ hiển thị màn hình thay đổi thông tin người dùng và hiển thị ra các thông tin cần nhập để cập nhập ( sửa).

            Hệ thống sẽ hiển thị màn hình thay đổi thông tin người dùng và hiển thị ra các thông tin cần nhập để cập nhập ( sửa). Hệ thống sẽ hiển thị màn hình thay đổi thông tin người dùng và hiển thị ra các thông tin cần nhập để cập nhập ( sửa). Hệ thống sẽ hiển thị màn hình thay đổi thông tin người dùng và hiển thị ra các thông tin cần nhập để cập nhập ( sửa).

            Hệ thống sẽ hiển thị màn hình thay đổi thông tin người dùng và hiển thị ra các thông tin cần nhập để cập nhập ( sửa).

            Mô tả thành phần và trình bày bản thiết kế hoàn chỉnh cho từng trang (admin)

              B6 ở cuối rectangle B5 thêm text “đi đến trang”, rectangle nhỏ để hiển thị số trang muốn đến với 1 icon enter để bấm chọn; thêm text “hiển thị”, rectangle nhỏ để hiển thị số tài khoản muốn hiện đồng thời trên màn hình (ví dụ hiện 5 tài khoản 1 lần hoặc 10 tài khoản 1 lần hiện); thêm text “tổng số”, rectangle nhỏ để hiẻn thị tổng số. B6 ở cuối rectangle B5 thêm text “đi đến trang”, rectangle nhỏ để hiển thị số trang muốn đến với 1 icon enter để bấm chọn; thêm text “hiển thị”, rectangle nhỏ để hiển thị số tài khoản muốn hiện đồng thời trên màn hình (ví dụ hiện 5 tài khoản 1 lần hoặc 10 tài khoản 1 lần hiện); thêm text “tổng số”, rectangle nhỏ để hiẻn thị tổng số. B3 tạo rectangle mới để chứa và hiển thị các trường dành cho việc nhập thông tin, gồm 6 text “mã nhà cung cấp”, “tên nhà cung cấp”, “ngày tạo từ ngày”, “ngày tạo đến ngày”,”số điện thoại”, “địa chỉ” và 6 rectangle tương ứng để làm trường nhập thông tin, sau đó thêm 1 rectangle nhỏ với 1 text “thêm nhà cũng cấp” để làm button thêm nhà cung cấp.

              B6 ở cuối rectangle B5 thêm text “đi đến trang”, rectangle nhỏ để hiển thị số trang muốn đến với 1 icon enter để bấm chọn; thêm text “hiển thị”, rectangle nhỏ để hiển thị số tài khoản muốn hiện đồng thời trên màn hình (ví dụ hiện 5 tài khoản 1 lần hoặc 10 tài khoản 1 lần hiện); thêm text “tổng số”, rectangle nhỏ để hiẻn thị tổng số. B6 ở cuối rectangle B5 thêm text “đi đến trang”, rectangle nhỏ để hiển thị số trang muốn đến với 1 icon enter để bấm chọn; thêm text “hiển thị”, rectangle nhỏ để hiển thị số tài khoản muốn hiện đồng thời trên màn hình (ví dụ hiện 5 tài khoản 1 lần hoặc 10 tài khoản 1 lần hiện); thêm text “tổng số”, rectangle nhỏ để hiẻn thị tổng số. B3 tạo rectangle mới để chứa và hiển thị các trường dành cho việc nhập thông tin, gồm 6 text “mã loại sản phẩm ”, “tên loại sản phẩm”, “ngày tạo từ ngày”, “ngày tạo đến ngày”, “ngày chỉnh sửa từ ngày”, “ngày chỉnh sửa đến ngày”, và 6 rectangle tương ứng để làm trường nhập thông tin, sau đó thêm 1 rectangle nhỏ với 1 text “thêm loại sản phẩm” để làm button thêm loại sản phẩm.

              B3 tạo rectangle mới để chứa và hiển thị các trường dành cho việc nhập thông tin, gồm 6 text “mã đơn hàng”, “tên khach hàng”, “ngày tạo từ ngày”, “ngày tạo đến ngày”, “ngày chỉnh sửa từ ngày”, “ngày chỉnh sửa đến ngày”, và 6 rectangle tương ứng để làm trường nhập thông tin, sau đó thêm 1 rectangle nhỏ với 1 text “thêm loại sản phẩm” để làm button thêm loại sản phẩm.

              Mô tả thành phần và trình bày bản thiết kế hoàn chỉnh cho từng trang (phía mobile)

              • Màn hình trang đăng nhập
                • Màn hình trang khôi phục lại mật khẩu
                  • Màn hình trang về chúng tôi

                    Status-bar dùng để hiển thị các thông tin giờ, pin, sóng của điện thoại Username dùng để hiển thị phần nhập thông tin email. Mục thông tin ở cuối trang dùng để hiển thị các thông tin giới thiệu về công ty , địa chỉ , số điện thoại , các trang mạng xã hội. Status-bar dùng để hiển thị các thông tin giờ, pin, sóng của điện thoại Mục tiêu đề hiển thị tiêu đề đơn hàng đã mua bao gồm ngày tháng năm.

                    B4 tạo các component hiển thị hình ảnh về sản phẩm đã mua, text thứ tự sản phẩm, tên sản phẩm, giá tiền, trạng thái và option lựa chọn”đặt lại”,”xem chi tiết”. Status-bar dùng để hiển thị các thông tin giờ, pin, sóng của điện thoại Mục tiêu đề hiển thị tiêu đề chi tiết đơn hàng bao gồm ngày tháng năm Mục thông tin người nhận hàng bao gồm người nhận, địa chỉ, thời gian. Status-bar dùng để hiển thị các thông tin giờ, pin, sóng của điện thoại Mục tiêu đề của frame là Thông tin cá nhân.

                    Khi ấn vào icon “ + “ trên sản phẩm sẽ dẫn tới trang đã thêm sản phẩm dấu hiệu để biết là dưới thanh menu options cơ bản ở mục giỏ hàng từ số 0 lên số 1. Khi thực hiện thao tác lướt trang qua phải hoặc trái sẽ lướt qua các frame danh sách sản phẩm khác bằng on drag chế độ move in qua phải hoặc qua trái cùng hiệu ứng ease out đồng thời các icon “…” sẽ đổi màu dựa trên trang mà nó đang hiển thị. B2 trong rectangle trên tạo 3 icon để hiển thị sóng, wifi, pin của điện thoại và 1 text hiển thị giờ, 1 avatar người dùng(kết hợp hình ảnh copy vào cùng với 1 hình tròn , sử dụng use as mark để đưa hình ảnh vào hình tròn) , 1 logo shop.

                    KIỂM TRA VÀ ĐÁNH GIÁ 1. Kiểm tra tính khả thi của giao diện

                    Thu thập phản hồi từ người dùng

                    - Đảm bảo rằng bạn không chỉ thu thập phản hồi một lần mà còn tiếp tục thu. Điều này giỳp bạn hiểu rừ hơn về cỏc vấn đề người dùng gặp phải và có thể phản ứng kịp thời. - Thay vì chỉ thu thập phản hồi qua các phương tiện không tương tác như câu hỏi khảo sát, cân nhắc sử dụng các phương tiện tương tác như cuộc trò chuyện trực tiếp hoặc cuộc gọi điện thoại để tạo cảm giác người dùng được lắng nghe và động viên hơn.

                    - Đừng chỉ dừng lại ở việc thu thập phản hồi, mà hãy đầu tư thời gian và nguồn lực vào việc phõn tớch phản hồi một cỏch chi tiết để hiểu rừ hơn về những vấn đề cụ thể và có kế hoạch cải thiện cụ thể. - Sau khi thu thập và phân tích phản hồi, đảm bảo rằng bạn cung cấp phản hồi hoặc phản ứng đối với người dùng. Điều này giúp họ cảm thấy được quan tâm và thấy rằng phản hồi của họ đang được xem xét và đánh giá.