User Interface Design for Smart Home Security System

Desklib provides solved assignments and past papers to help students succeed.

Contents
Introduction................................................................................................................................2
Sol. (a)........................................................................................................................................3
Sol. (b)......................................................................................................................................17
Conclusion................................................................................................................................18
References................................................................................................................................19
List of Figures
Figure 1: Login Screen...............................................................................................................3
Figure 2: Login Page Navigation..............................................................................................4
Figure 3: Registraion Screen......................................................................................................5
Figure 4: Navigation from Home page......................................................................................8
Figure 5: Light Screen................................................................................................................9
Figure 6: Security Screen.........................................................................................................11
Figure 7: Surveillance camera screen......................................................................................13
Figure 8: Navigation from camera...........................................................................................14
Figure 9: Media Screen............................................................................................................15
Figure 10: Menu Screen...........................................................................................................17
Figure 11: Navigation from Menu screen................................................................................19
Figure 12: Add new device screen...........................................................................................20
Figure 13: Air conditioner screen............................................................................................22
Figure 14: Overall temp. screen...............................................................................................24
Figure 15: TV control screen...................................................................................................26
Figure 16: System settings screen............................................................................................28
Figure 17: Electronic locks screen...........................................................................................30

Introduction
User interfaces are very helpful prototype these days in the scenarios of application
development and also to upgrade any application. various kind of applications can be
developed using the case scenarios and requirement of the client and all these things are
totally dependent on the basic interface design that any application can have. This basic
design of every application can be created using the Heuristic design principles that show
how an application can be designed in a proper and precise way with limited necessary
functionalities and proper specification.
This assessment comprises various interfaces or mockups designed on the Balsamiq software
using the formulas interface designing according to the need for the application to be
developed. Here, an Home security application is designed which should be able to control
the electronic equipment of any home in a particular network. For this, using the mockups,
various designs are prepared that can assist in the development of the actual application.

Task 3
Sol. (a)
Mock-up-1: Login Screen
Figure 1: Login Screen
About Designs
Above mockup displays the “Login page” of the Home security application. This mockup
basically defines the way in which the functionalities of the “Login page” will be conducted.
The designed is prepared using the principles of usability of interface designing and this
mockup is prepared using the “User control and freedom” principle.
Used Components
For this designed to be prepared following components are used:
 Various buttons are used in this design for various functionalities.
 Text input is used in this mockup screen where the user can enter their login credentials.

 Labels are used to show various titles shown in this screen along with the properly
required linking.
Selection Reasons
Several reasons are there behind selecting this type of design in this mockup. This design
represents the “Login screen”. Every design that is selected in this interface is designed using
the heuristic principle and according to the requirements of the client. This design is prepared
using the above-mentioned heuristic principle and by this design, the user will be able to
Login into the application using their login credentials.
Navigation
Figure 2: Login Page Navigation

Mock-up-2: Sign-up Screen
Figure 3: Registraion Screen
About Designs
Above mockup displays the “Sign-up Screen” of the Home security application. this mockup
basically defines the way in which the functionalities of the “Sign-up Screen” will be
conducted. The designed is prepared using the principles of usability of interface designing
and this mockup is prepared using “User control and freedom” and “Match between real and
system world” principle.
Used Components
For this designed to be prepared following components are used:
 Different buttons for different functionalities are used in this layout.
 In this mockup display, text entry is used, where the customer can register their self by
entering the required information for the mockups.
 Labels are used to show various titles shown in this screen along with the properly
required linking.
Selection Reasons

In this mockup, there are several explanations for choosing this layout. The "Sign-up screen"
is the name of this structure for the home security application. Every layout chosen in this
application is intended in accordance with the heuristic concept and the customer's needs.
This layout is created according to the above-mentioned principles of usability or user
interface designing and by means of its login qualifications, the user will be able to register
their self with the home security application using their necessary credentials.

Mock-up-3: Home Screen
About Designs
Above mockup displays the “Home Screen” of the Home security application. This mockup
basically defines the way in which the functionalities of the “Home Screen” will be
conducted. The design is made according to the rules of device usability and this mock-up is
ready with the concept of “Aesthetic and minimalist design”.
Used Components
For this designed to be prepared following components are used:
 Various symbols are used along with the linking to a particular related page.
 Labels are used to show various titles shown in this screen along with the properly
required linking.
Selection Reasons
Several reasons are there behind selecting this type of design in this mockup. This design
represents the “Home screen”. Every design that is selected in this interface is designed using
the heuristic principle and according to the requirements of the client. This design is prepared
using above mentioned heuristic principle and by this design, the user will be able to access

the home screen of the application after login and using this screen they can also use several
functionalities of this screen.
Figure 4: Navigation from Home page

Mock-up-4: Lights Screen
Figure 5: Light Screen
About Designs
The mockup shown above is the interface for the “Lights screen” of the Home security
application. This mockup is designed in this way because of the specification and
requirement of the “Light screen”. This design prototype is created using the heuristic
principles of usability and these principles are “Recognition rather than recall” and
“flexibility and efficiency of use”.
Used Components
For this designed to be prepared following components are used:
 Different buttons for different functionalities are used in this layout.
 Various symbols are used along with the linking part which shows various functions with
proper linking.

 In this mockup display, rectangles are used to show the status of the lights in different
rooms or areas like living area, kitchen etc.
 Labels are used to show various titles shown in this screen along with the properly
required linking.
Selection Reasons
In this mockup, there are several explanations for choosing this layout. The "Lights Screen"
is the name of this structure for the home security application. Every layout chosen in this
application is intended in accordance with the heuristic concept and the customer's needs.
This layout is created according to the above-mentioned principles of usability or user
interface designing and by means of its login credentials; the user will be able to control their
light options using this screen in various rooms

Mock-up-5: Security Screen
Figure 6: Security Screen
About Designs
Above mockup displays the “Security Screen” of the Home security application. This
mockup basically defines the way in which the functionalities of the “Security Screen” will
be conducted. The designed is prepared using the principles of usability of interface
designing and this mockup is prepared using the “User control and freedom” principle.
Used Components
For this designed to be prepared following components are used:
 Various buttons are used in this design for various functionalities.
 Text input is used in this mockup screen where the user can enter their login credentials.
 Labels are used to show various titles shown in this screen along with the properly
required linking.

Selection Reasons
Several reasons are there behind selecting this type of design in this mockup. This design
represents the “Security Screen”. Every design that is selected in this interface is designed
using the heuristic principle and according to the requirements of the client. This design is
prepared using the above-mentioned heuristic principle and by this design, the user will be
able manage the various security options available in this screen.