1
SOFTWARE DESIGN AND CONSTRUCTION
Assignment 06-Graphical Interface Design
Lecturer: NGUYEN Thi Thu Trang,
[email protected]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
