Loading...
Tìm kiếm

Tag Archives: Wireframe

Khi mình làm việc với nhiều anh em Business Analyst, mình thấy nhiều bạn dùng các từ Sketch, Wireframe, Mockup và Prototype đôi lúc sai ngữ cảnh, ý nghĩa. Nên mình viết lại bài này, hi vọng sẽ giúp bạn hiểu hơn về các khái niệm, dùng khi nào và cách dùng cho hợp lý nhé.

1. Sketch

  • Là bản phác thảo một cái gì đó trên giấy hoặc trên bản vẽ ở máy tính.
  • Nó cung cấp cho mình những thông tin cơ bản.
Sketch
Sketch

DÙNG KHI NÀO?

  • Thường là giai đoạn đầu của việc phân tích, mình hình thành ra ý tưởng, luồng, màn hình cơ bản.
  • Mình hay vẽ đại ra trên giấy để có cái nhìn vô một cách trực quan để dễ hình dung và phân tích.

CÁCH DÙNG:

Vẽ đơn giản, dễ hình dung,  tiết kiệm thời gian, vẽ miễn sao dễ hiểu và nhanh, dễ truyền đạt ý tưởng chứ không cần vẽ cho đẹp.

Dùng giấy, hoặc phần mềm Excalidraw, Balsamiq, Figma

2. Wireframe

  • Là kiểu thiết kế có các thông tin cơ bản, giao diện cơ bản đủ thành phần (ví dụ phải đủ các trường, dữ liệu, nút button…)
  • Và bản thiết kế này thì không cần màu mè gì nhiều, không cần quá đẹp, nhìn vô là hiểu trên màn hình sẽ có nội dung ra sao, nút đặt chỗ nào, …
Wireframe
Wireframe

DÙNG KHI NÀO?

  • Trong khi phân tích chi tiết, viết tài liệu nghiệp vụ, business rule, trước khi làm UI, khi làm các bước về luồng màn hình.
  • Giúp cho thấy được sự luân chuyển giữa các màn hình (điều hướng), cách các màn hình làm việc với nhau.

CÁCH DÙNG:

  • Vẽ đơn giản, đầy đủ thông tin trên màn hình,  dễ hình dung,  tiết kiệm thời gian.
  • Đừng thêm màu mè quá nhiều, chỉ dùng các màu đơn giản để đánh dấu tạo điểm nhấn, nút quan trọng,…
  • Thông tin trên màn hình nên đầy đủ về trường, nút, …
  • Đi kèm với mô tả Business Rule hoặc viết tài liệu hoặc comment/chú thích.
  • Vẽ đường mũi tên để chỉ sự điều hướng giữa các màn hình, hoặc đôi lúc gắn nút điều hướng trên ứng dụng design để có thể thể hiện sự tương tác giữa các màn hình => giúp cho việc trình bày với KH, stakeholders khác dễ hình dung hơn.
  • Mình hay dùng Balsamiq, Figma, Excalidraw, Adobe XD, Giấy, hoặc Ipad (với bút) để tạo wireframe.

3. Mockup (UI)

  • Là kiểu thiết kế trực quan, khá giống với phiên bản thực tế khi xây dựng web/ứng dụng. Có màu đầy đủ, có mấy yếu tố như đổ bóng, viền, animation kèm theo,…
  •  Vẽ kỹ tới mức mà Front-end designer có thể nhấn vào và xem kích thước chính xác, có các thành phần CSS, responsive.
  • Mình làm công ty thì thấy mọi người hay gọi là UI, Bảng design
Mockup
Mockup

DÙNG KHI NÀO?

  • Thường thì BA chả đụng gì trong phần thiết kế UI mà chỉ làm phần review luồng, nút có đủ chưa, phù hợp với tính năng nghiệp vụ đang làm hay không?
  • Thường được làm sau bước đã xong tài liệu nghiệp vụ/hoặc làm song song dạng cuốn chiếu với tài liệu nghiệp vụ.
  • Được dùng khi thiết kế trực quan, cụ thể để từ đó dựng nên giao diện web/ứng dụng.
  • Khi mà cần đánh giá yếu tố màu, phong cách, thương hiện, phối giữa các đối tượng giao diện, hình ảnh, sự chuyển động.

CÁCH DÙNG:

  • Thường BA ít/không làm phần này, mà là Designer sẽ lo, do đó BA có thể đi sâu vào mục review đánh giá, góp ý cũng như bổ sung thêm các thông tin còn thiếu trên giao diện, hay sự tương tác giữa các màn hình sao cho khớp với yêu cầu nghiệp vụ.
  • Nếu bạn có kỹ năng về phần giao diện này thì bạn có thể góp ý cũng như đưa ý kiến cá nhân nếu thấy sản phẩm mockup chưa được phù hợp.

Prototype

  • Là một bản như Mockup mà nó có thể hoạt động được khi mình gắn sự liên kết giữa các màn hình và user có thể thao tác được. Mục tiêu chính là để mô phỏng sự tương tác giữa người dùng và giao diện.

DÙNG KHI NÀO?

  • Phần này thường bên BA dùng để đi trình bày với khách hàng, stakeholders, mô phỏng ứng dụng thực tế 
  • Hoặc có thể xem và đánh giá trước khi code để chắc chắn rằng bản giao diện phù hợp, luồng tính năng hợp lý, hoặc làm cả việc nhờ người dùng đánh giá,…

CÁCH DÙNG:

  • Cũng là phần Design lo là chính, BA thường phụ phần gắn tương tác giữa các màn hình.
  • Lưu ý khi bật prototype thì chọn màn hình cho phù hợp, mà mở ở mức 100% để cảm nhận nó giống thật, không bị phóng to, hay thu nhỏ mà đánh giá sai về giao diện.
  • Với mình thì mình đánh giá cả độ tương phản, rồi test WCAG.
  • Ngoài ra Prototype còn hay được dùng cho các ứng dụng xây tạm thời, mô phỏng giao diện và build ra app/web để đưa ra cho người dùng thấy (có thể viết một vài tính năng cơ bản mà chưa xây dựng đủ, dùng dữ liệu giả,…)

Kết bài.

Cảm ơn bạn đã đọc bài viết của mình, nếu có gì sai sót hoặc chưa đúng thì để lại comment cho mình nhé.

Thực tập sinh IT BA cần những kỹ năng gì?

Hi lại là Hoàng đây!

Chắc có lẽ nhiều bạn đang còn ngồi trên ghế nhà trường, hoặc đang đi làm có ý định thực tập vị trí IT Business Analyst quan tâm rằng

“Cần những kỹ năng gì để có thể được nhận làm vị trí thực tập sinh IT Business Analyst.”

Dưới đây là góc nhìn của mình, một người từng tuyển dụng nhiều vị trí BA chia sẻ về các kỹ năng mình cần tìm ở một bạn ứng viên thực tập sinh IT Business Analyst.


Ba kỹ năng chính mình tìm ở Thực tập sinh.

  • Kỹ năng về logic và hiểu về hệ thống
  • Kỹ năng về giao tiếp
  • Kỹ năng về documentation.

Vậy chi tiết từng kỹ năng mình yêu cầu như thế nào?

Kỹ năng đầu tiên: Logic và hiểu về hệ thống

Theo quan điểm của mình thì người IT BA phải là người có thể suy luận logic và đưa ra những giải pháp hợp lý cho dự án phần mềm, mà để làm được điều này thì bản thân người làm cũng phải hiểu về tư duy hệ thống, đối với level thực tập, fresher thì tư duy hệ thống cơ bản là bắt buộc, ví dụ như tư duy Ba tầng của phần mềm gồm có tầng giao diện (UI), tầng xử lý nghiệp vụ – logic và tầng kết nối lưu trữ dữ liệu. Cách hệ thống hoạt động cho luồng đăng nhập, thì user phải nhập thông tin đăng nhập tại giao diện (UI) và gửi yêu cầu đến xử lý ở tầng nghiệp vụ – logic, và từ tầng này sẽ truy xuất và so sánh kiểm tra với dữ liệu trong hệ thống để biết được thông tin đăng nhập có khớp không?

Ba tầng xử lý trong IT BA
Ba tầng trong ứng dụng phần mềm.

Hay là cách phần mềm hoạt động như thế nào, có thể tư duy ra được các trường hợp có thể xảy ra, giống như chuyện suy luận “nếu hôm nay mình quên học bài” thì sẽ có những trường hợp nào xảy ra như “không thuộc bài”, “bị cô giáo phạt”, “bị lên sổ đầu bài”, “mẹ biết bố mẹ buồn”,… thì khi áp dụng vô phần mềm, ví dụ đăng nhập thì phải tư duy được người dùng có thể dùng phương thức nào để đăng nhập như “email/pass”, “số điện thoại/pass”, …. và trong email/pass lại có những trường hợp nào có thể xảy ra  như “email không hợp lệ”, “email không tồn tại”, “mật khẩu bị sai”, … hoặc đăng nhập xong thì phải có tư duy suy luận là hiển thị màn hình gì? màn hình hiển thị cần những thông tin gì? những thông tin đó ở đâu, các trường hợp có thể xảy ra khi đăng nhập thành công.

Do đó khi phỏng vấn thực tập sinh hay fresher, thường câu hỏi của mình sẽ hỏi đến các câu hỏi thực tiễn để xem các bạn có tư duy logic suy luận như thế nào? và hiểu cách hệ thống chạy ra sao? mình sẽ chưa quan tâm đến trong cuộc phỏng vấn thì ứng viên có trả lời hoàn hảo hay không, mà sẽ quan tâm đến cách ứng viên đi tìm ra câu trả lời sao cho phù hợp và đưa ra “giải pháp” phù hợp theo tư duy logic của ứng viên.

Kỹ năng thứ hai: Giao tiếp

Tiếng Anh là một lợi thế cực lớn cho các bạn làm IT BA, với nỗi đau trước đó của mình, khi bắt đầu làm BA thì tiếng Anh của mình ở đâu đó 500-600 TOEIC, mà còn giao tiếp (nghe/nói) cực yếu nữa, khi làm dự án Âu Mỹ hay Sin thì mình bị ngợp, cũng như mình tìm thông tin chưa quá tốt và tốn nhiều thời gian khi phải gần như là sài Translate rất nhiều, gặp khách hàng trực tiếp thì lúc nào cũng cần có một bạn làm công việc như PM đi cùng để giúp mình, rất là bất tiện.

Nên thường mình cũng sẽ khá quan tâm đến kỹ năng tiếng Anh của ứng viên, dĩ nhiên ở mức giao tiếp cơ bản đủ sài. Hoặc giống như lúc mình xuất phát với vị trí BA, thì đọc hiểu cơ bản là mình chấp nhận nhưng luôn dặn ứng viên là cần phát triển thêm về Giao tiếp.

Tiếng Anh thì tuỳ thuộc công ty và dự án, nếu dự án ít dùng hay không dùng thì tiếng Anh không quá bắt buộc, nhưng có tiếng Anh là một lợi thế cho BA. Ngoài liên quan đến làm việc giữa anh em dự án, khách hàng, thì còn ảnh hưởng đến việc tìm kiếm thông tin hay học hỏi thêm kỹ năng BA từ nơi khác, đặc biệt là các nguồn tài liệu tiếng Anh.

Giao tiếp và trao đổi tốt là một điều rất cần của một BA, khi mà BA là nơi cầu nối giữa Khách hàng và Đội ngũ phát triển dự án, thì việc giao tiếp là bắt buộc. Giao tiếp ở đây là khái niệm khá chung chung, nó bao gồm cả việc nói chuyện với khách hàng, khơi gợi khách hàng để họ chia sẻ ra những cái NEED (dịch tạm là yêu cầu/cần) của họ, trao đổi trong lúc làm việc, kết nối anh em đội ngũ, hay trình bày ý tưởng, chia sẻ quan điểm cá nhân, thuyết phục mọi người.

Communication Kỹ năng giao tiếp
Kỹ năng giao tiếp

Do đó với phần giao tiếp này mình thường hay hỏi về tính cách, rồi công việc, các hoạt động từng tham gia ở sinh viên hay cách ứng viên trả lời phỏng vấn.

 

Kỹ năng thứ ba: Documentation

Kỹ năng này là kỹ năng cuối cùng mà mình thường tìm ở ứng viên, nhưng độ quan trọng nó sẽ không cao bằng 2 yêu cầu phía trên, vì bản chất người làm công việc BA là người có tư duy và đưa ra giải pháp, cách trao đổi nói chuyện với mọi người để giải quyết vấn đề trong phát triển phần mềm, phải có tư duy thì mới có giải pháp được, còn việc viết lại tài liệu là một kỹ năng theo sau bổ trợ cho tư duy và giải pháp để giúp làm rõ giải pháp cũng như truyền tải giải pháp ra một cách dễ dàng hơn.

Nhưng ứng viên cũng cần PHẢI biết để thể hiện rằng ứng viên biết về BA sẽ làm những loại việc gì? có tìm hiểu và tìm cách học các kỹ năng về documentation, wireframing.

Kỹ năng sketch
Kỹ năng sketch

Đa phần bây giờ khi tìm trên google sẽ ra ngay là documentation thì cần học cách viết BRD, URD, SRS, User Story, … rồi vẽ sketch, wireframe,… học về UML, BPMN.

Đọc thêm  Balsamiq Wireframe miễn phí - công cụ cho Business Analyst

 

Đọc thêm  Thực tập IT Business Analyst cần những kỹ năng gì?
Review wireframe/mockup dễ hơn với tool Axure Cloud.”]

 

Nên thường ở đoạn kỹ năng này mình sẽ hỏi các câu hỏi liên quan đến việc các bạn ấy biết là BA cần làm gì ở phần viết tài liệu, tài liệu nào sẽ được dùng trong trường hợp nào, đã học được công cụ gì rồi, diagram A thì khi nào sài, diagram B khi nào sài, …

 

Kết bài

Với kinh nghiệm từng tìm vị trí thực tập, rồi đến giai đoạn mình tìm ứng viên là thực tập sinh, fresher rồi các bạn làm công việc BA ở các level cao hơn, phỏng vấn vài chục bạn BA để tuyển dụng. Khi tuyển dụng thực tập sinh ba kỹ năng quan trọng mà mình cần tìm ở thực tập sinh IT Business Analyst là Tư duy logic, hiểu về hệ thống, kỹ năng về giao tiếp và trình bày trên tài liệu, biết các công cụ cơ bản để trình bày.

Hi vọng bài viết trên sẽ giúp các bạn trả lời phần nào thắc mắc “Thực tập sinh IT Business Analyst cần những kỹ năng gì?”, giúp các bạn sớm chuẩn bị đầy đủ những kỹ năng phù hợp để ứng tuyển vị trí BA.

Lúc mình làm BA tại công ty, có rất nhiều bạn Business Analyst mới dùng Balsamiq hay hỏi mình tải ở đâu, rồi cách crack công cụ này :D, sẵn dịp mới mở lại vụ viết blog, nên chia sẻ anh em Balsamiq Mockup miễn phí (key) nha.

Nhưng trước hết mình phải biết được Balsamiq Mockup là công cụ gì cho anh em nào chưa biết nhé.

Balsamiq wireframe là gì?

Đây là một công cụ mà giúp xây dựng nên những giao diện web/app dưới dạng wireframe bằng cách kéo thả những widget đã được tạo sẵn. Giao diện thì bao dễ sài, dùng vài lần là sài dễ như ăn chơi. Anh em có thể tìm thêm khóa học của mình về Balsamiq để học nhé, hướng dẫn chi tiết từ A tới Z luôn.

Đọc thêm  Khóa học làm quen với Balsamiq Mockup 3 - Miễn phí

Trước kia khi mình dùng và hay kiểm tra trang web của Balsamiq thì tên của công cụ này là Balsamiq Mockup, nhưng hiện nay đã đổi qua tên mới là Balsamiq Wireframe.

Để hiểu hơn về Wireframe, mockup, sketch, prototype thì anh em đọc thêm 2 bài này nhé:

Đây là giao diện của em Balsamiq

Balsamiq có 2 phiên bản, phiên bản desktop và cloud – và 2 phiên bản đều có trả phí. Nhưng trên các diễn đàn chia sẻ cách crack rất nhiều, riêng mình thì tìm được một số key từ một số diễn đàn và dùng thử, mình thấy rất tốt nên chia sẻ lại cho anh em sài phiên bản Desktop – Version Balsamiq Mockup 3.

Tải và cài đặt

Để sử dụng thì bạn tải balsamiq mockup 3 tại đây: https://balsamiq.com/wireframes/mockups3fordesktop/

Sau khi tải và cài đặt, bạn nhập key sau nhé:

1) Name: Flash
Serial: eNrzzU/OLi0odswsqnHLSSzOqDGoca7JKCkpsNLXLy8v1ytJTczVLUotKNFLzs8FAJHYETc=

2) Name: SoftVnn
eJzzzU/OLi0odswsqgnOTysJy8ursUQCNc41hjV+7q5+AClADYE=

3) Name: tuan.cse06 – SoftVnn
eJzzzU/OLi0odswsqikpTczTSy5ONTBT0FUIzk8rCc..q7FEAjXONYY1f u6ufgD21RF1

Cảm ơn anh em đã đọc bài viết của mình nhé, hi vọng bài viết này sẽ giúp cho anh em sài được Balsamiq miễn phí nha. Nếu yêu thích bài viết của mình thì lâu lâu ghé thăm blog của mình nhé. Cảm ơn ae 😀

Đọc thêm về cách chia sẻ wireframe/mockup đến khách hàng khi làm Business Analyst nhé

Đọc thêm  Balsamiq Wireframe miễn phí - công cụ cho Business Analyst
Review wireframe/mockup dễ hơn với tool Axure Cloud.”]