Scribd
Upload
32 views

Lab&Assignment06 GraphicalInterfaceDesign

Uploaded by

hoangcongtu2409
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
32 views

Lab&Assignment06 GraphicalInterfaceDesign

Uploaded by

hoangcongtu2409
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

1

SOFTWARE DESIGN AND CONSTRUCTION


Assignment 06-Graphical Interface Design
Lecturer: NGUYEN Thi Thu Trang, trangntt@soict.hust.edu.vn

1. SUBMISSION GUIDELINE
You are required to push all your work to the valid GitHub repository complying
with the naming convention:
“<MSTeamName>-<StudentID>.<StudentName>”.
For this lab, you have to turn in your work twice before the following deadlines:
§ Right after class: Push all the work you have done during class time to
Github.
§ 10 PM the day before the next class: Create a branch named
“release/lab06” in your GitHub repository and push the full submission for
this lab, including in-class tasks and homework assignments, to this branch.
Remember to export your diagrams to PNG files and push them with .astah
files to GitHub.

2. GRAPHICAL USER INTERFACE DESIGN


In this section, we will get familiar with the software detailed design process and
start with interface design for the Case Study.
You are asked to work individually for this section, and then put all your file(s) and
directories to a directory, namely “DetailedDesign/GraphicalInterfaceDesign”.
After that, push your commit to your individual repository before the announced
deadline.
Boundary classes are used to model the interaction between a system and its
surroundings, i.e., its actors. Hence, they can be utilized to capture the
requirements on a user interface. The interactions between people and systems
might be through various kinds of user interfaces (UI) such as batch interface,
command-line interface (CLI), and graphical user interface (GUI).
In this subsection, we use GUI to illustrate how to design UIs step by step. You can
have a look at some samples of UI/UX design:
HANDS-ON LAB GUIDELINES
© SOICT – HUST
ITSS SOFTWARE DEVELOPMENT – IT4945E
2

- Charity Donation App: https://duchai.framer.website/Chado


- Re-design Starbuck Ordering App: https://duchai.framer.website/Redesign-
Starbuck

2.1. STANDARDIZING THE SCREEN CONFIGURATION


Please create and submit your screen configuration in a text file.

Display
Number of colors supported: 16,777,216 colors
Resolution: 1366 × 768 𝑝𝑖𝑥𝑒𝑙𝑠

Screen
Location of standard buttons: At the bottom (vertically) and in the middle
(horizontally) of the frame
Location of the messages: Starting from the top vertically and in the middle
horizontally of the frame down to the bottom.
Display of the screen title: The title is located at the top of the frame in the middle.
Consistency in expression of alphanumeric numbers: comma for separator of
thousand while strings only consist of characters, digits, commas, dots, spaces,
underscores, and hyphen symbol.

Control
Size of the text: medium size (mostly 24px). Font: Segoe UI. Color: #000000
Input check process: Should check if it is empty or not. Next, check if the input is in
the correct format or not
Sequence of moving the focus: There will be no stack frames. Each screen will be
separated. However, the manual is considered a popup message, as the main
screen cannot be operated while the manual screen is shown. After the opening
screen, the app will start with splash screen, and then the first screen (home
screen) will appear.

HANDS-ON LAB GUIDELINES


© SOICT – HUST
ITSS SOFTWARE DEVELOPMENT – IT4945E
3

Direct input from the keyboard


There will be no shortcuts. There are back buttons to move back to the previous
screen. Also, there is the close button “X” located at the title bar to the right to close
the screen.

Error
A message will be given to notify the users what is the problem.

2.2. CREATING SCREEN IMAGES


Creating screen images or mockup designs can be done by using applications such
as https://moqups.com/, http://draw.io/, Figma, InVision Studio, Paint, Adobe
Graphic design software, Adobe XD, or Scene Builder.
The following figures are made with Scene Builder, just for your reference for
AIMS. You have to use figma to design for all screens for use cases related to place
orders. Please export all screens to images, as well as figma link for your
submissions.

HANDS-ON LAB GUIDELINES


© SOICT – HUST
ITSS SOFTWARE DEVELOPMENT – IT4945E
4

HANDS-ON LAB GUIDELINES


© SOICT – HUST
ITSS SOFTWARE DEVELOPMENT – IT4945E
5

HANDS-ON LAB GUIDELINES


© SOICT – HUST
ITSS SOFTWARE DEVELOPMENT – IT4945E
6

2.3. SCREEN TRANSITION DIAGRAM / USER FLOW


Creating screen transition diagram can be done by using https://draw.io or any
drawing applications (even figma) as specified in the previous section.

HANDS-ON LAB GUIDELINES


© SOICT – HUST
ITSS SOFTWARE DEVELOPMENT – IT4945E
7

2.4. SCREEN SPECIFICATION

Screen specification
AIMS Software Date of creation Approved Reviewed Persion in charge
by by

Screen specification View cart screen 30/10/2020 Đỗ Minh Hiếu

Control Operation Function

Area for Initial Display the subtotal


displaying the
subtotal

Area for display Initial Display the media with the


items in the cart corresponding information

Place order Click Display the Delivery form


button

Delete button Click Remove the item from the cart

Defining the field attributes

Screen name View cart

Item name Number of Type Field attribute Remarks


digits (bytes)

Media title 50 Numeral Blue Left-justified

Price 20 Numeral Blue Right justified

Subtotal 20 Numeral Blue Left-justified

2.5. PLACE RUSH ORDER


You are asked to design GUIs as above steps for the UC “Place Rush Order”.

HANDS-ON LAB GUIDELINES


© SOICT – HUST
ITSS SOFTWARE DEVELOPMENT – IT4945E

You might also like