Scribd
Upload
10 views15 pages

Simple Calculator UI Design Document

The document describes the user interface design for a simple calculator system. It includes a business function diagram and lists of the main interfaces, which are the home page and operators for addition, subtraction, multiplication, division, and finding the remainder of a division. The interfaces are intended to allow users to easily perform calculations and view results.

Uploaded by

05 Nguyễn Văn Dũng
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
10 views15 pages

Simple Calculator UI Design Document

The document describes the user interface design for a simple calculator system. It includes a business function diagram and lists of the main interfaces, which are the home page and operators for addition, subtraction, multiplication, division, and finding the remainder of a division. The interfaces are intended to allow users to easily perform calculations and view results.

Uploaded by

05 Nguyễn Văn Dũng
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

INTERNATIONAL SCHOOL

CAPSTONE PROJECT 1
CMU-CS 246 BIS

USER INTERFACE DESIGN DOCUMENT


Version: 1.1

SIMPLE CALCULATOR SYSTEM – SCS


Mentor: Nguyen Dang Quang Huy

Team Member:

Nhung, Ngo Thi Tuyet

Duyen, Huynh Thi My

An, Ngo Nguyen Truong

Loc, Truong Tan

Dung, Nguyen Van

Approved by Huy Nguyen Dang Quang

UserInterface Review Panel Representative:

Name Signature Date

Capstone Project 1- Mentor:

Name Signature Date


USER INTERFACE DOCUMENT

Da Nang, 01/2024
PROJECT INFORMATION
Project
SCS
Acronym

Project Title SIMPLE CALCULATOR SYSTEM

Start Date 20 – Jan –2024 End Date 27 – Jan –2024

Lead
International School, Duy Tan University
Institution

Team
Name Email Phone
Member

2820904309
Ngo Thi Tuyet Nhung nn8242115@[Link] 0763770335
4

2820904347 myduyenhuynh1010@gmail.c
Huynh Thi My Duyen 0913228912
2 om

2821113478 Ngo Nguyen Truong ngonguyentruongan2907@gm


0919499505
8 An [Link]

2821910146
Truong Tan Loc tanlocamsat@[Link] 0393165051
6

2821905011
Nguyen Van Dung mynameisdungz@[Link] 0906577651
4

Team 1 2
USER INTERFACE DOCUMENT

PROJECT PLAN DOCUMENT


Document Title User Interface Document

Author(s) Team 01

Date Jan 21th, 2024 File name:

URL

Access Project and CMU Program

Team 1 3
USER INTERFACE DOCUMENT

SIGNATURE
Document Approvals: The following signatures are required for approval of this
document.

Signature:
Mentor Huy, Nguyen Dang Quang
Date:

Signature:
Team
Nhung, Ngo Thi Tuyet Nhung
Leader
Date:

Signature:
Duyen, Huynh Thi My
Date:

Signature:
An, Ngo Nguyen Truong
Team Date:

member(s)
Signature:
Loc, Truong Tan
Date:

Signature:
Dung, Nguyen Van
Date:

DOCUMENT HISTORY

Version Person Date Description

Team 1 4
USER INTERFACE DOCUMENT

1.0 All members Jan 20th, 2024 Draft

1.1 All members Jan 27th, 2024 Final

TABLE OF CONTENTS

I. INTRODUCTION............................................................................................................................ 7

1. PURPOSE.............................................................................................................7

2. SCOPE..................................................................................................................7

3. SCOPE..................................................................................................................7

II. LIST OF USER INTERFACE................................................................................................... 8

1. BUSINESS FUNCTION DIAGRAM:.................................................................8

2. WEB APP:............................................................................................................9

III. DESCRIBE USER INTERFACE........................................................................................... 10

1. HOME PAGE.....................................................................................................10

2. OPERATOR.......................................................................................................11
2.1 Addition...........................................................................................................11
2.2 Subtraction......................................................................................................12
2.3 Multiplication..................................................................................................13
2.4 Division...........................................................................................................14
2.5 Division to get remainder................................................................................15

Team 1 5
USER INTERFACE DOCUMENT

TABLES

Table 1: List of Interface

Table 2: Describe User Interface Home page

Table 3: Describe User Interface Addition page

Table 4: Describe User Interface Subtraction page

Table 5: Describe User Interface Multiplication page

Table 6: Describe User Interface Division page

Table 7: Describe User Interface Division for remainder page

Team 1 6
USER INTERFACE DOCUMENT

I. INTRODUCTION

1. PURPOSE

 Document the design of user interface of functions of the Calculator System


 Be the primary document driving the implementation of the user interfaces.
 Introduce interface design for the reader. Including the background, content
information display, command buttons.

2. SCOPE

 This document helps to better understand the interface of the System, detailed
specification components and function of the System.
 With this document, the development team can understand the structure and
composition to create a consistent and complete system.
 Overview of the stages and modules of the software and create a complete
interface.

3. SCOPE

This document is intended for the following audiences:

 Technical reviewers including:

o Product owner

 Implementers, including:

o Developers.

o Testers.

Team 1 7
USER INTERFACE DOCUMENT

II. LIST OF USER INTERFACE

1. BUSINESS FUNCTION DIAGRAM:

Team 1
USER INTERFACE DOCUMENT

2. WEB APP:

User Interface ID UI Name Description

Login will be used as the


function to allow user to log into
UI-01 Home Page
the system, it needs to be put in
moderation.

“+” will be used as the function


Find result of the
UI-02 to allow user to find result of the
addition
addition that they have input.

“-” will be used as the function


Find result of the
UI-03 to allow user to find result of the
subtraction
subtraction that they have input.

“*” will be used as the function


Find result of the to allow user to find result of the
UI-04
multiplication multiplication that they have
input.

“/” will be used as the function


Find result of the
UI-05 to allow user to find result of the
division
division that they have input.

“%” will be used as the function


Find result of the to allow user to find remainder
UI-06
division for remainder of the division that they have
input.

Table 1: List of Interface

Team 1 9
USER INTERFACE DOCUMENT

III. DESCRIBE USER INTERFACE

1. HOME PAGE

Team 1
USER INTERFACE DOCUMENT

2. OPERATOR

2.1 Addition

Team 1
USER INTERFACE DOCUMENT

2.2 Subtraction

Team 1
USER INTERFACE DOCUMENT

2.3 Multiplication

Team 1
USER INTERFACE DOCUMENT

2.4 Division

Team 1
USER INTERFACE DOCUMENT

2.5 Division for remainder

Team 1

Common questions

Powered by AI

The described user interface for the division operation in the Simple Calculator System is clear in outlining the input and control steps: entering two numbers in input fields, executing the division, clearing fields, and returning to the Home page. However, improvements could include error handling for division by zero scenarios by providing specific notifications for such invalid inputs. This would enhance user understanding and usability .

The User Interface Document assists developers and testers by providing detailed specifications of the interface structure and functions, guiding implementation, testing, and validation of the software system. Developers use it to understand expected outputs and inputs for each operation, while testers use it to create test cases and scenarios to verify functionality against documented requirements, ensuring cohesive system behavior .

Each team member participated in creating and approving the User Interface Document by contributing to document drafts and revisions and endorsing the final version through signatures. Leadership roles, such as by the Team Leader, Ngo Thi Tuyet Nhung, involved not only content contribution but also coordinating document approval by mentor and member sign-off, ensuring a collaborative and verified process .

A uniformly structured interface for operations like addition, subtraction, multiplication, and division simplifies the user experience by providing consistent interaction patterns and expectations across different functionalities. This coherence in design reduces user error, enhances learning curve efficiency, and boosts usability. However, this could limit flexibility in addressing unique operational requirements, such as handling division by zero, which might require deviation from the uniform structure .

The User Interface Document defines the process for performing an addition operation through several steps: the user enters the first number in an input text field, enters the second number in another input text field, and then presses a button to execute the operation. The result or a notification for invalid input is displayed in a text field. Users also have options to clear text fields and return to the Home page .

Crucial design elements for notifying users of invalid input in the Simple Calculator System include display text fields that provide clear, immediate feedback on input errors such as division by zero or non-numeric entries. The system could enhance these notifications by using color-coding or alert icons to draw attention and ensure users can quickly understand and correct their input mistakes .

Potential risks of misinterpretation include the development of interfaces that do not align with user expectations or business requirements, leading to a product that may not function correctly or efficiently. This misalignment can result in additional time and resources spent on rework and modifications, project delays, and compromised project quality if issues are not detected early. Rigorous reviews and close collaboration between teams can mitigate these risks .

The business function diagram serves as a high-level overview that establishes the connections and workflows within the calculator system, linking user actions to backend processes. Individual user interfaces, such as addition and division functions, are specified in detail within this framework to illustrate how these interfaces operate within the business context, thus ensuring alignment between UI design and system functions .

The scope and audience considerations ensure that the User Interface Document is tailored to meet the needs and expectations of technical reviewers and implementers like developers and testers. It impacts development by focusing on technical clarity and operative detail essential for these stakeholders, potentially reducing misunderstandings and accelerating the development process by ensuring all parties have a clear reference point .

The primary purpose of the User Interface Document for the Simple Calculator System is to document the design of the user interface functions of the calculator, serving as the main document guiding the implementation of these interfaces. It introduces the interface design, including background, content information display, and command buttons. This document helps stakeholders, such as technical reviewers, developers, and testers, to understand the system’s interface structure, thereby facilitating a consistent and complete system development .

You might also like