Automated UI & UX Framework

Rajpal Singh Karamvir, Kaur Maninder, International Journal of Advance Research, Ideas and Innovations in Technology.
© 2017, IJARIIT All Rights Reserved Page | 261
ISSN: 2454-132X
Impact factor: 4.295
(Volume3, Issue1)
Available online at: www.ijariit.com
Automated UI & UX Framework
Karamvir Singh Rajpal
Computer Science Engineering/Punjab Technical University
karamvir72@gmail.com
Maninder Kaur
Computer Science Engineering/Punjab Technical University
maninderecediet@gmail.com
Abstract— A consistent UI leaves an overall impression on user’s psychology, aesthetics and taste. Human–computer interaction (HCI) is
the study of how humans interact with computer systems. Many disciplines contribute to HCI, including computer science, psychology,
ergonomics, engineering, and graphic design. HCI is a broad term that covers all aspects of the way in which people interact with computers.
In their daily lives, people are coming into contact with an increasing number of computer-based technologies. Some of these computer
systems, such as personal computers, we use directly. We come into contact with other systems less directly — for example, we have all seen
cashiers use laser scanners and digital cash registers when we shop. We have taken the same but in extensible line and made more solid
justified by linking with other scientific pillars and concluded some of the best holistic base work for future innovations. It is done by
inspecting various theories of Colour, Shape, Wave, Fonts, Design language and other miscellaneous theories in detail.
Keywords— Karamvir Singh Rajpal, Mandeep Singh Rajpal, User Interface, User Experience, Design, Frontend, Neonex Technology,
I. INTRODUCTION
UI being an important part of the OS is always crucial from any user’s point of view as it simplifies how to approach the system to
get our work done. UI is not only about Shell, Mouse, Buttons and other general visual components but also it has inducing effect
on the user. The development of efficacious and gorgeous UI involves a multidisciplinary approach with the application of
Physics and Mathematics and consideration of the sensible human psyche. A refined UI is always highly valued by one in the
backdrop of Culture of Global Interactions. The study details the different parameters of an UI and its overall impact on true user
friendliness behavior. Further it explains how the current scenario of UI standards is emerging as standard and how new trends are
giving rise to plethora of motifs. The last decade has witnessed remarkable progression of UI paradigm, the development of some
of the UIs made headway in a substantial constructive manner. A consistent UI leaves an overall impression on User’s Psychology,
Aesthetics and Taste. Human Computer interface (HCI) is the study of how humans interact with Computer Systems. Many
disciplines contribute to HCI, including Computer Science, Psychology, Ergonomics, Engineering and Graphics Design. HCI is a
broad term that comprises all aspects of the way in which people interact with computers. In their daily lives, people are not
coming into contact with an increasing number of computer based technologies. Some of these computer systems, such as PCs, we
use directly. We come into contact with other systems less directly – for e.g. we have seen all cashiers use laser scanners and
digital cash registers when we shop. We are also aware; some systems are easier to use than others. When users interact with a
computer system, they do so via UI. The study explores and furthers the good UI can wear extra dimensions. Interfaces that are
easy to use and easy to understand are equally meeting the needs of the intended users by supporting users in the tasks they wish
to undertake. In particular, it has been explained why good UI is important and highlight the consequences of poor or the worst
UI design. We will get to start thinking about users. We will get to start about thinking about users – and why and how to invoke
them in the design and evaluation of the user. A consistent UI design encourages an easy, natural and engaging interaction
between a user and system which allows user to carry out their required tasks. With a good UI, the user can forget that one is
using a computer and get on ones wants to do. Just as knowledge of the transmission mechanism of a car is of little concern to
most motorists, knowledge of internal workings of a computer system should be of little consequence to its users. Although we
have used the adjectives “Good”, “Poor” and “Bad” to describe UI, it is worth noting that each of these terms is subjective: they
have different meanings for different people and their use to rate various aspects of UI which may vary in terms of colors used, the
pictures on the icons, or how interactive and equally attractive or eye-catching the glimpse it represents. These attributes describe
the overall look or aesthetics of the UI. Nevertheless they are only a part of our focus in their research. Our real concern is
whether UI is good or bad in relation to its usability. User centered design (UCD), an approach to UI design and development
which involves users throughout the design and development process. Besides its focus on users’ understanding, it also requires an
understanding of the tasks that user will perform with the system and of the environment (Organizational, Social and Physical) in
which they will use the system. Taking UCD approach should optimize a computer system’s ability. To create a perfect designing
language apart from an artwork, it also requires a lot of parameters to be considered precisely before it is implemented in products
and services. These can be seen from major titans like Microsoft[8], Apple[35], Google[19][20] which have been instrumental in

fabricating an interaction exciting, progressive, simple, clean and natural with their great range of verticals. Our study has more
enlightening on other unsung parameters like Apt color [14] [25] [15] [6], Acoustic [7] [31] [23] [27],
Shape and Size [9].
Figure 1 – Workflow required in creating the next generation UI framework
To seek out the best of any colour, its better if a transition belt of the specific colour is used in applications and products. If
possible, according to user mode the colour can be changed as per one’s requirement. The UI is infact the part of human automata
and it needs to be in sync with the given produced facts. The design language of UI needs to be met in accordance with the neural
architecture of humans (i.e. users). Then only the required or desired computing will be more fruitful and productive. There is a
need for more evolution in BCI methodology for mainstream apps and computing. The BCI has a full scope and potential to
replace IoT concept and also ensuring the consideration of security and privacy parameters. A neat, consistent, balanced UI should
also follow the philosophy of geometrical figures [36]. Subtle changes/variations can make a huge difference. The frequency of
any colour component has the ability to heal or harm anyone. So let’s define this discussed principle as Visual Data Structure. Use
of White Colour should be encouraged (at least in combination) with every colour because it amplifies the colour’s potential (as
we know the white colour is a cumulative spectrum of all visible components). Use of Black Colour should be encouraged in
getting paired with other colour to negate the negative aspects and drawbacks of the said colour. Hence it is correctly said in
Physics’ jargon Black is the best absorber besides being the best reflector. Colour and Visuals enhance learning capability because
the visible spectrum’s frequency is in the range of more than 100 Hz. Enhancer level can be achieved when a colour’s frequency
and a corresponding sound’s frequency is synced at every instance. If reason behind font typography is incorporated properly in
an existing Semantic UI framework and NUI i.e. Natural User Interface (which has more realistic appealing visuals) then a
foundation of Natural Semantic UI can be one of the existing possibilities in future. Every component of UI follows a NLP
(Neuro-Linguistic Programming) [34] [32] technique and every theory of UI also revolves around Subliminal messaging
technique [2].
 To make user interface more adaptable to user’s needs and requirements
 To be more dynamic and flexible as per the system’s configuration and specification.
 To enhance the capabilities of existing popular User Interface standards like Semantic UI, Windows Modern UI,
Google’s Material Design UI, Natural User Interface and make more simplified and functionally advanced.
 To seek for an effective solution by balancing the content and visual appeal.
 To build a great UI with perfect navigation from any instance to any other instance.
 To create and maintain an environment of interoperability where interfaces are completely understood, to work with
other products or systems, present or future, without any restricted access or implementation.
 To make a scalable environment for different kinds of users using across the computer software or app.
On the software front, Github, Wireframe.cc, Blender, Inkscape, any CAD software is must to map the components of UI.
For the font typography, various tools like FontCreator, FontLab Studio, FontStruct and FontForge can be used to execute
a thought of font making. For acoustic creation as referred in Sound Theory, one must have sound knowledge on the
frequencies and its impact. There are software like LogicPRO, Garage Band, FruityLoops, SoundCheck and etc. available
to create new acoustics. The computer should be powered by at least Windows 7 or higher operating system is required to
make the worth of designing UI. Also for the pro level, Linux and Apple OS X are recommended tools for both visual and
audio creation. Reason for setting these mentioned operating systems as an imperative standard is that API, Display Driver
Model is in sync with the software tools. On hardware front, the system should have the following configuration. However
recommended is Machine Architecture: 64 Bit, CPU: Intel Xeon, AMD Opteron, Cell, IBM Power5, and RAM: 8 GB or
higher, GPU: ATI or nVidia, Pen and Touch.
Currently the focus is entirely on considering visual parameter in UI up to some extent but still it needs evolution by considering
various shapes and appropriate mixture of colours and fonts. We have taken the same but in extensible line and made more solid
justified by linking with other scientific pillars and concluded some of the best holistic base work for future innovations. It is done
by inspecting various theories of Colour, Shape, Wave, Fonts, Design language and other miscellaneous theories in detail. In
recent mainstream UI arena we have seen formats that are responsible for evolving rich and initiative graphics layout to the next
level. Vector graphics methodology has become a generic in laying out such great paradigm. Still there are unexplored areas
which need to be imbibed with the GUI. Now we are reinventing the concept where all kinds of media can be utilized. Besides UI

Shell (Visual Media), other aspects can be embodied. Till now every OS has its own standard defined shell. Accordingly user
adopts himself for its use. So the time to learn and understand the basics of the particular kind of UI gets wasted, productivity for
achieving the purpose gets deferred. So a learning system of AI needs for learning the natural human ways of interaction. In the
previous kinds of shell (desktop environment), ever system call corresponds to the particular driven/clicked action performed by
the user on the specific UI component. Hence, user needs to be well-versed with every component like Context Menu, Window,
Cursor, Bar, Button, Icon, etc. However in our proposed case, the interface system will be programmed in accordance with
human driven activities mapped in an ordered format. Universal languages like smell, clap, haahaaa, sign language, phonetic +
acoustic are also accepted by wide audience in spite of demographic differences.
Let us consider the first visual parameter i.e. Colour. The colour being visible spectrum is something which easily connects with a
user’s receptors in creating an impression and perception. For example, start with green. This colour has attributes of being “fast
and multifarious”. Reason: It follows a geometric progression with moderate degree of magnitude kind of streaming its energy.
Let’s say: 2, 4, and 8,16,32,64,128,256,512. Hence it misses many numbers between every consecutive move. So we can observe
that much type of outcomes make a way in a very short time. Psychologically, a feeling of youth, dynamic nature, communication,
versatility and possessing huge energy can be associated with this colour. Also by a known fact of the green we are already aware
of its wavelength being 495-570 nm. So naturally its frequency will be more and the time period will definitely be less as
compared to yellow colour. A popular app WhatsApp uses green colour prominently which is controlled version of FB addiction
in terms of required communication in personal space. Now let’s explore the Blue spectrum’s properties. Its wavelength lies in the
range of 450-495 nm. So naturally its frequency will be less as compared to that of Green. Hence the time period of the Blue will
be more as compared to that of Green. It represents an attribute of carrying emotional state of deep feeling and attachment. As
such users who have tendency of using this colour in their day to day life applications have been found to be sensitive. Its
frequency is much greater as compared to other visible spectrum band, hence we can conclude there are a many number of
processes which keeps on triggering. In other words, with user’s psyche, the blue colour induces an effect of number of multiple
emotion states in every second. So clash of multiple emotion states causes an anxiety and a kind of depression. Also with this
reason we also generally witness human behaviour of being much caring. Being the highest in frequency it follows an exponential
sequence. E.g. In very popular apps like Twitter and Face research of being a breed of the Blue spectrum artwork, any new user
becomes loyal to these social media. Human’s psychology response to such apps can be overlooked by tweaking its prominent
colour and shading to a higher wavelength (or lower frequency).’s wavelength is less than 380 nm and its frequency is the highest
and hence its time period is less. Therefore it takes less time to consolidate all the available resources (good or bad or both) to
form a consolidated product (a kind of authority). Now moving to the Yellow colour, its wavelength is 570-590 nm. Its frequency
will be less as compared to the discussed ones. So its progression in sequence will not be strictly geometric. It will pace with a
speed of arithmetic progression with a notable common difference. e.g. 0, 12, 24, 36, 48, 96….and so on. It is psychologically
observed an impact of this colour to human’s psychology seems out to be positive and constructive in almost many ways. One can
be seen with radiating, creatively energised, intelligent, optimistic, spread and diversification type of feeling, clarity. User with its
colour can be seen with boost level of confidence and also reflects great communication. But the drawback can be observed when
an excessive use of yellow colour or potency of this colour’s intensity is doubled or made more amplified then behaviour and
response of user can be “over-analytical”, “lack of compassion” and “non-emotional”. Now proceeding to the Orange colour, its
frequency is little bit lower than its preceding colour component Yellow. So its nature of progression is on the lines of pure
arithmetic progression with modest common difference. Let us say something like this 2,8,14,20,26,32. It is psychologically
observed an impact of this colour to human’s psychology seems out to be positive and constructive in almost many ways. One can
be seen with radiating warmth spirit and happiness, physical energy cum simulation of red and cheerfulness of yellow. User with
its colour can be seen with spontaneity in behaviour with positive outlook. Next one is the Red colour; its frequency is the lowest
among all visible components. So its nature of progression is on the lines of pure arithmetic progression with the least common
difference. Also only one kind of thought is processed in per instance. Hence we can see a tendency of mentally alert is prepared
for heat like activity. This colour has a psychological effect on user of being “energetic and passionate. The neutral feature of this
colour is that every aspect (whether positive or negative) is magnified clearly and distinctly. This colour can find its proper
implementation in sports app.
Figure 2 – Visible spectrum
Figure 3 – Kit Kat like Font Style
Impact of the font: Appreciating the change of message, instantly recognizable connection with Nestle Kit Kat
Reason: Obtuse angle means anti-clockwise bend, inclination towards west culture, youth energy with spark.

Figure 4 – Famous auto brand BMW uses Arial (Credits: www.bmw.com)
Impact of the font: Enthusiastic, Friendly, and Confident
Reason: Every alphabet is mutually perpendicular and aligned (straight firm and confident). Nowhere deviating (neither
clockwise nor anticlockwise).
Figure 5 – FedEx uses Century Gothic Font (Credits: www.fedex.com)
Impact of the font: Represents modern, future, open, cool, spirit of progressive age
Reason: Being rounded and equally broad
Flat Design language: It owes and borrows cues from 3 styles of art [18] namely: Swiss Style (aka International Typographic
Style) [24], Modernism [30] and Bauhaus [28] [22]. The Swiss Style is often considered the most substantial and influential on
flat design and its emergence and popularization during the 1950s-1960s. It is regarded as the starting point of flat design and
minimalistic UI design genre. Use of grid is prominent. It is a design language for users who love simplicity (esp. when a single
type of feature is available for a user to access or select). It is also seen that websites load faster and resize easily and still look
sharp on HD screens. Hence, it doesn’t consume many resources. In 2006, Microsoft was the first one to adopt this design
principle in Zune MP3 player. It was simple and neat with a focus on large lowercase typography. It employs the use of
monochromatic design backgrounds. The same principle was continued to be innovated in Windows Phone 7 and Windows 8 with
large and bright images, Sans-Serif font. The design language was also adopted by the rival titan Apple in their popular products
iOS [1] [3] from 2013 onwards and Google’s Material Design since 2014 [4].
Step 1 – The first process starts by fetching user’s activity from Input Devices. The entered response can be click on the screen.
The number of responses can be queued for the further process to be taken.
Step 2 – Post the first process gets completed where user actions have been collected from various directions. This is a
verification step to check whether an input action is pertaining to systematic or randomized order.
Step 3 – If the action tends to be Systematic then mapping/preparing the corresponding UI component will be started from the
selection configurable dashboard. In order to remember what the action he had performed can be recorded in QR Code format for
various mapped sessions and events. The different UI components can be accessed from jQuery UI and Feathers UI tool where
live deployment can be made as an entity and can be mapped to the specific QR Code.
Step 4 – This stage of process is optional for novice users but a good choice for nerds and developers. Here the editor opens
where it asks for more extensible/ additional actions to be taken from the developer section like JavaScript, HTML5, PHP or etc.
Programming and coding can be done at online editor/IDE platforms like Code Chef and Code Anywhere, C9.io
Step 5 – The final stage concludes by relating and linking accordingly other kinds of media dimensions (medium forces) with the
created visual customized UI component. Other kinds of media dimensions comprises Cryptographic based biometric input,
Olfaction, Acoustic/Vocal, Ether flow, Location, Sign Language, Neural & Mind mapping. After this user can start mapping
files/actions/objects with the customized programmed events.
CONCLUSIONS
This research can yield the best and nurture the prospects of UI in making computing more personalized and revolutionary not
only in computer but also in IoTs. Interaction can become more streamlined and productive for both consumers and enterprise
users. Also an underlying technology of the software can be fully utilized when the UI is neatly designed. We have recently
witnessed Android and Apple OS has joined the likes of mass popularity among mainstream users in mobile segment, the reason
is their simplified UI design yet sharing the foundation kernel of Linux and UNIX respectively. So following the best design
trends can make exemplary standard for new undermined system technologies to surface its impression. There are chances that a
unified model of computing can be developed where human and computer interaction can become vivid and the gap can be
bridged. In the conventional scenario users adopt what UI presents before them. But in this innovative design of UI the system
will learn from the user getting in sync with the user’s personalized choices. So the best idealistic UI can be known as “Automated
UI”. The Proposed Work will be implemented by following the prescribed manner. A frequency meter is needed to keep a tab on
frequencies which keep soon changing in every instance. Hence it can be a suitable is call for automated self-adjustment UI. Also
an A.I. type of logic is needed to respond to different/various human nature modes. Hence it can be another suitable call for
automated and self-adjustment UI. Apps’ full potential can be properly exploited when all the above mentioned guidelines and
discussed theories are obeyed and applied schematically.

Multi Layered UI System – This approach is perhaps can be seen as the refined and centralized approach where every kind of
substance can be embedded into one. So different layers can be created where every layer will carry stored different substance of
material. Like Layer 1 bearing only graphical component. Layer 2 moves on with audio media and Layer 3 with texture and Layer
4 with smell, Layer 5 with other higher dimensions. The call of corresponding universal multi dimensions I/O reader is needed for
future class interactive computing devices.
ACKNOWLEDGMENT
This is my warm and adequate acknowledgment to all those who helped me to make my project successful especially my parents
and my younger brother Mandeep Singh Rajpal. It is my earnest privilege to express my heartiest gratitude, sincere thanks &
indebtedness to Mrs. Maninder Kaur, Officer In charge, PTU Regional Centre, Doaba Institute of Engineering & Technology,
Mohali for her interest and for giving me an inspiration to work.
RESULT AND ANALYSIS
This chapter tabulates the performance of every approach. Results on each technique have been discussed individually. Relative
performance comparison of all approaches on the basis of various parameters has been discussed. Let’s start about the sound
benchmarked for various sound tracks
Audio Tracks’ Genre Blues
Classical
Sufi Rock
Parameters used Average CPU Load
Frequency
Noise
Table 1 – Various Audio tracks of various genres
Average CPU Load (Base CPU Frequency Core i3 Model 2310M = 2.10 GHz) Genre
8% (i.e. 0.168 GHz) Classical
10% (i.e. 0.21 GHz) Blues
11% (i.e. 0.231 GHz) Sufi Rock
Table 2 – Different music tracks tested
Figure 6 – Sound sampling analysis of Blues Genre Figure 7 – Sound sampling analysis of Classical Genre
Figure 8 – Sound sampling analysis of Sufi Rock Genre Figure 9 – Comparison of various music genres
If Average CPU Load is above 30% then audio track’s bit rate will be scaled down by some respective percentage so that overall
balancing remains optimized by keeping video or picture’s fps. If buffer is about to get free, then bit rate will be remain constant
in conjunction with HFGA (High fidelity graphics array). Let’s say normal rendering rate of video at some instance was 30 fps
when audio was negligible but in the midst of media file being played gets audio treatment at high beats coupled with some sort of

noise component will affect overall buffering size. So the ultimate solution to such mammoth hitch needs optimization treatment,
let’s say wither 30 fps of video needs to be reduced to 20 fps but keeping overall processing parameter of audio component
preserved or 30 fps rate will be preserved but audio rate or audio codecs switching needs to be scaled down accordingly. All such
scaling up or scaling down needs to be in sync with CPU standards or network bandwidth/protocol standard.
Note – During scaling down the magnitude from 30 fps to 20 fps must maintain the propionate scheme of 1 frame being in same
number of pixels, sharpness, and crisp factor and alike.
REFERENCES
[1] Apple's Official Website iOS Design Framework Guidelines”, 2014
[2] A. E. Kazdin (Ed.), “The Science of Subliminal Messages in Encyclopaedia of Psychology”, (Vol. 7, pp. 497-499), New York:
Oxford University Press, 2000.
[3] Aurich Lawson, “The global influence of iOS 7’s design language”, 2013
[4] Article - Google’s “Material Design and how Paper defines the future of Web UI”, Reilley Design Studio, October 2014
[5] Baker, Stephen, “Final Jeopardy: The Story of Watson, the Computer That Will Transform Our World”, Mariner – Research,
2012
[6] Barbara J. Meier, “ACE: A Color Expert System for User Interface Design”, 1988
[7] Brian H. Dalton and David G. Behm, “Effects of noise and music on human and task performance: A systematic review”,
2007
[8] Bill Buxton, “Windows User Experience Interaction Guidelines”, Microsoft, 2013
[9] Camille Bossoutrot, “Efficient Use of Drawables to Develop A Dynamic UI on Android”, 2013
[10] Champa H N, Dr. K R Ananda Kumar, “Artificial Neural Network for Human Behavior Prediction through Handwriting
Analysis”, 2010
[11] Clayton Miller, Article: “Flat is not the opposite of skeuomorphic From Interuserface”, 2013
[12] David McNamee, “Brain waves synchronize 'in order to learn'”, 2014
[13] Daniela Cardenas, “Handwriting Analysis (Graphology)”, 2013
[14] Dr. Tobias Komischke, “Colors and the UI”, 2008
[15] Dmitry Fadeyev, “Using Light, Color and Contrast Effectively in UI Design”, 2008
[16] Freeth, C. M., & Taylor, T. F. “Skeuomorphism in Scythia: deference and emulation, Olbia ta antichnii svit. Kiev, British
Academy / Ukrainian Academy of Sciences”, 2001
[17] Haffenden LJ, Yaylayan VA, Fortin J. "Investigation of vibrational theory of olfaction with variously labelled
benzaldehydes". Food Chem. 73 (1): 67–72, 2001
[18] Jason Beaird , “The Principles of Beautiful Web design” 2nd edition, 2010
[19] Jason Morris, “Android User Interface Development: Beginner's Guide”, Chapter # 3, 2013
[20] Jason Ostrander, “Android UI Fundamentals Develop and Design”, 2012
[21] Kim, Hyunsu et al., “An X–Y Addressable Matrix Odor-Releasing System Using an On–Off Switchable Device".
Angewandte Chemie 50 (30): 6771–6775, 14 June 2011
[22] Lefevers, Jason , "A Walk through the History of the Metro UI". Windows Phone Metro, 15 September 2013
[23] Mark Changizi, “Why Does Music Make Us Feel?” 2009
[24] Meggs, P. B., Purvis, A. W., & Meggs, P. B., “Meggs' History of Graphic Design”. John Wiley & Sons, Inc., p. 356, 2006
[25] Martin Suzanne, “Effective Visual Communication for Graphical User Interfaces”, 1995
[26] Flat Design vs. Skeuomorphism – “Effects on Learnability and Image Attributions in Digital Product Interfaces David
Oswald, Steffen Kolb”, Pages: 402-407 ISBN: 978-1-904670-56-8, 2014
[27] Myriam V. Thoma, Roberto La Marca, Rebecca Brönnimann, Linda Finkel, Ulrike Ehlert, Urs M. Nater, “The Effect of
Music on the Human Stress Response”, 2013
[28] O'Connor, Z, "The Shillito Design School: Australia's link with the Bauhaus". The International Journal of Design in Society,
6(3), 149–159, 2013
[29] Pao L. Chang, Staradigm, Chapter – “The Relationship between Disease and Energy Frequency”, 2011
[30] Pericles Lewis, “Modernism, Nationalism, and the Novel” (Cambridge University Press). pp 38–39, 2000
[31] Roger W. Wicke, Ph.D, “Herbalist Review, Issue 2002 #1: Effects of music and sound on human health”, 2002
[32] Richard Bandler, “How to Get a Positive Mental Attitude via NLP”, 2013
[33] Sandeep Dang, Prof. Mahesh Kumar, “Handwriting Analysis of Human Behaviour Based on Neural Network”, 2014

Automated UI & UX Framework

More Related Content

What's hot (20)

Similar to Automated UI & UX Framework (20)

Recently uploaded (20)

Automated UI & UX Framework