Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
User Interface Design
1. User Interface Design
COMP – 1650
University Banner ID – 000860665
Table of Contents
Introduction ..................................................................................................................................................2
Design Issues.................................................................................................................................................2
Legal Ethical Social Issues .............................................................................................................................3
Colour Theory ...............................................................................................................................................4
Font Terminology..........................................................................................................................................5
Guidelines .....................................................................................................................................................5
Evaluation .....................................................................................................................................................7
Conclusion.....................................................................................................................................................8
Low Fidelity Prototype..................................................................................................................................9
References ..................................................................................................... Error! Bookmark not defined.
2. Introduction
rowdsourcing is a process of obtaining varieties of data from various sources for many reasons.
Crowdsourcing in health should include data such as the names of doctors, the area of expertise
and solutions for diseases that they offer. The reason for doing Crowdsourcing in healthcare
environment is not only for the cure but also for prevention of diseases from outbreak. Crowdsourcing
in healthcare may also be high-up to the national level, such as government developing this kind of
solution for taking surveys and status of certain diseases for the prevention of some serious diseases; for
instance, Ebola disease. Crowdsourcing system can use in almost everything. Another area which the
crowdsourcing may be useful is in Immigration System, where government needs to record every
citizen’s histories. The last but not least, crowdsourcing system can be used in directory services; in this
case, for Myanmar is Yangon Directory which is the one and only telephone directory service in
Myanmar. They need to record every businesses’ details and put those in their system, so that the public
can access whatever they want using applications.
Design Issues
There are some common issues when designing user interfaces. System developers should consider
changing or avoiding these issues in user interface design. They are –
Messages
Menus and dialog boxes
Icons and bitmaps
Access and shortcut keys
UI controls
Messages
When we are talking about messages display at every level of the system, their meaning should be clear
and short as the user can understand more quickly and can act the required actions quickly. Even in
some very famous application like “Microsoft SQL Server” whenever an error throws, the messages in
the error message boxes are usually very long ones and the user have to spend at least 5 to 10 seconds
to understand the cause of it. It is very boring and as well as dangerous. The time the user spent on
reading the message box can be the main factors in pushing the system and data to unimaginable
damage.
Menus and dialog boxes
Another issue in UI design is about menus and dialog boxes. System should have menus strips as less as
possible for user to effectively use them. Some applications have more than 10 menu strips and many
more options inside each of them causing the users to confuse which menus is for what and what
options include under each of them. When we name the menu strips, naming is also important because
obviously only the customer sees is that name at very first stage deciding to use them. Dialog boxes are
the same thing. When we talk about dialog box issues, we need to find some place between security and
efficiency. When there is too much unnecessary dialog boxes show up every time we do some changes
like “Windows User Account Control” it affects the efficiency of the system while increasing the security.
When the users want to do something quick, unnecessary dialog boxes should be eliminated. For
instance, turning off PC or exiting from some application is nothing to worry about and the users want to
do it within one click process. In such situation, there shouldn’t be a dialog box or message box asking
whether or not you sure to exit.
C
3. Icons and bitmaps
User interface design issues cannot be fully discussed unless issues about icons and bitmaps are fully
disclosed. When we talk about icons, we will talk about not only icons in desktop but also icons inside
the system to show certain meaning of buttons and text boxes to users. Icons should be consistent and
reflects the meaning of their particular functions they adhered to. For example, we can’t put scissor
shape icon in save button; same thing, we can’t put diskette icon in cut button.
Access and shortcut keys
Shortcut keys must be relevant with the function and easy to understand and remember. Access keys
and shortcuts keys must be universal use things such as Alt + F4 is exit, Ctrl + W is close, so on and so
forth so that the users can easily get used to and remember almost all the shortcuts. However, we need
to bear in mind that there is absolutely no such things as trying to remember all the shortcut keys and
there is no way to do that also.
UI controls
UI controls mean how to control the UI; the horizontal and vertical scroll bars and how the UI should
adapt the environment; that is when using in mobile devices and using in PC screen. The thing is, when
we use in mobile devices, scrolling the screen is not an option; we need to consider using mobile screen
UI design with certain aspects ratios. That is also for websites design. When we surf the web from PC,
the webpage take advantage of the large PC screen and display all the information clearly and widely.
However, when we surf from mobile devices, the screens get smaller and the size of the webpage and
design should adapt those changes into mobile web UI design.
Legal Ethical Social Issues
Legal ethical and social issues in developing crowdsourcing system in healthcare environment are
important; not only in healthcare environment, but also in every major enterprise system development,
there must be or there should be certain laws to obey and certain constraints set by the customer or
organisation which interface with development companies to develop their systems. There are also
ethical behaviours and social issues to take care when interface between customers and software
companies. In this case, the customers will be the companies which decide to developed IT systems and
the software companies are the ones which develop software for those companies.
Legal Issues
When we trying to develop health related system, there are many legal obligations to abide for. There
are certain laws about getting information from respective areas, such as –
Need to consult and communicate with medical authorities
Need to interface with township medical offices to get disease data
Confidentiality for personal data collected from medical authorities about patient and doctors
Need to interface with local authorities such as police and health teams such as CDC in States
The organisation has to appoint at least one lawyer to interface between legal bodies, the software
company and the organisation. There are many laws when it comes to developing IT systems two of
them are –
Privacy
Copyright and License
When we talk about privacy, we are building healthcare system so privacy issues interrelate with ethical
issues because privacy means information security and data sharing policies. As I stated above we need
4. certain laws covering about obtaining medical data about individuals in the medical industry. We need
to use appropriate guidance and regulations from related legal bodies when we interface and obtain the
information. Proper collection of information under approved legal bodies is very critical without
causing intrusion of privacy of individuals, doctors and patients. There is very thin line between intrusion
of privacy and collection of data legally; they are very vague.
Copyright and License issues is second important thing after privacy when we talk about developing IT
systems and selling them. Obviously we need to cover our grounds for software piracy and unauthorized
copy of our system. We need to decide whether we want to sell our system outside or not. If we decide
to sell, what kind of license we will make and what are the feature limitations of each license title.
Moreover, also need to consult with lawyer about copyright and license.
Ethical Issues
There are certain ethics to know by system development staff when building the crowdsourcing system
for healthcare environment. As the programmers will get to know certain secrets about patients and
their health when crowdsourcing the information about them. Obviously this information is strictly
confidential for each of the patients and doctors; so that the developers must keep their mouths shut
when they are working on the project.
Social Issues
As the system we are going to develop is a crowdsourcing system in healthcare environment, we will
need to collect information about patients, doctors, illness and a lot of personal information about
public and there will be information concern with their personal security and confidentialities. If we are
not careful enough and mistakenly acquire such kinds of information, there will be serious social issues
can take place in developing the system.
Colour Theory
When designing and developing the system, either desktop or web, we need certain level of careful
considerations regarding colours. According to the definition, a colour theory is “the interaction of
colours in a design through complementation, contrast, and vibrancy”. Colours can have various effects
to human mind. Every people have their own desire about how they see colours. Many emotional
feelings can arise from careful selection of colours. Colours theory is science in itself. When we talk
about colours, we must study about levels of colours such as cool, warn, normal based on their
saturation and hue. Moreover, there are also colours like primary colours, secondary colours and,
tertiary colours. In depth, tertiary colours are colours formed from mixing one primary and one
secondary colours or two secondary colours in a given colour space such as RGB and CYMK. Primary
colours are colours which can be used to create useful range of colours from combining them for variety
of colour usage whether they will used in display, painting, etc…. Secondary colours are colours formed
from combining two primary colours. For example, if we are using primaries as Red, Green and Blue
(RGB), we can combine green and red to form yellow secondary colour. Tertiary colours are colours
made by combining one primary colour and one secondary colour. That is that, we can create the colour
of azure by combining primary colour blue and secondary colour cyan. Nevertheless, we must ensure
that the interface we create must be clearly visible in terms of colour usage and we must also consider
using colours which reflects the nature of system and tradition. That is that, we are about to create
system for healthcare environment, so that the colours tradition must be the ones which are
traditionally use in medical environment; colours like red, blue, green are suitable for the health system.
Moreover, as the system is concern with healthcare and thus very important information will keep
5. inside the system, the user interface will also need to adapt with the degree of importance of the
information by switching into red colour where critical information is required or when that kind of
information is enter into the system. However, the system must be colourful on the one side but also
still need to look professional on the other side.
Font Terminology
For every system, either desktop or web, font is vital as the system is made up of texts. We need to
make sure how to display information on the screen right and clear with what font. There are varieties
of fonts to choose from. We need to make sure we use industry standard fonts for controls and system
interface as well as in web application, we need to make sure that users can easily and clearly see and
understand what the meaning about each functions is by looking at the text inside them. We must use
clear type font which gives users more visibility on the controls and buttons. All the user interfaces must
be consistence in font style. Moreover, we should also bear in mind that there will be some issues about
fonts if we use non-standard font like other languages or Unicode encoding style and also fonts must be
device independent and platform independent. When we are talking about fonts, fonts have various
characteristics such as weight, slope, width, optical size, metrics and serifs. The weight of the font
means the thickness of the font. There will be various typefaces may come with fonts of many weights.
Such as the fonts which intend to use in posters will usually have bold face while fonts for long run
applications or word processing may come with light face. Slope of the font can also called italics style.
Italics are often used to emphasis the meaning or importance of the thing or function that font express.
Moreover, width, optical size, metrics and serifs are the various characteristics of font. There are one
thing we familiar about them, serifs. When designing fonts for controls, we usually use san-serifs font.
When we talk about selecting font style for health system, we need to make used of narrow type font
with industry standard font style like san-serif.
Guidelines
We should exercise certain guidelines if the system must be able to run across different platforms such
as Microsoft and Apple.
Microsoft
Many computer systems are originally intended to use in Microsoft platforms because obviously,
Microsoft systems are the most famous operating system in the World and that’s why Microsoft set out
key guidelines for the developers to follow and developed their interactive systems. There are many
components in Microsoft systems such as – Controls, Commands, Text, Messages, Interaction, Windows,
Visuals, Experiences and Windows Environment.
Controls are the UI element which the users use to interact with the system which located on the main
form of your desktop system. For example – Text Boxes, Radio Buttons, Check Boxes, Buttons, List
Boxes, Combo Boxes, etc…
6. Commands are the ways for users to carry out certain tasks by clicking the mouse button or selection
the option from the system. There are currently three areas available to make commands from the users
such as, Menus, Ribbons and Toolbars. For the Microsoft systems, Menus are widely available in almost
all systems such as File, Edit, Tools, etc… Ribbons are newly introduced command structure in Microsoft
Office 2007 and mostly popular in Microsoft Office line of products. Toolbars are command elements
include in almost every module of the Microsoft operating systems.
Text is one of the recipes that users can use when using your application. Text include everything the
user type in your controls such as text boxes and combo boxes, etc... User Interface Text are obviously
the texts appear on your user interface such as title bars, instructions, menu texts, messages, etc…
Apple
When we are talking about Apple, we will be talk about a whole new experience for everything. Apple
have two OS named OSX and iOS. Obviously, because of the nature of OS, they use different styles of
interfaces across them. As I study both, Apple has some things in common between their both OS which
is that their interfaces are both immersive and mission oriented. Every apps they make are very
immersive to users. Moreover, the icons from apps are very stunning and they support preview mode
such as Calendar and Clock, the users can see current day and time just by looking right at the icons
itself. The default system font that Apple used across their OS is Helvetica. The main reason for Apple
user interface is so famous among users is that they are using numerous effects like translucency and
vibrant colours. Currently, the latest OS from Apple are, OSX Yosemite and iOS 8. They both offering
these effects in their user interface design. Another great thing about Apple is they support Retina
Displays in their certain devices so that a lot of great effects in interface can take advantage of the
displays. In terms of UI elements and styles, they have a lot of characteristics to talk about. In terms of
Basic UI elements, they support following basic design layouts –
Single-Window Utilities
This design is usually used in their single-window apps like Calendar, Calculator, Clock, etc… Many of
those are pre-installed utilities.
Single-Window Shoebox
The single-window shoebox design is the most noticeable improvements of Apple which is different
from other platforms. The thing is, if you open Photos app, you can manage all your photos right from
this app and no other place you can access your photo other than Photos app.
Multi-Window Document Based
Multi-window document based UI style is another design used in Apple system, this style is used by
multi-window document based apps such as Pages. Pages creates a new window every time the user
create a new page.
7. Interoperability between platforms?
When it comes to interoperability between different platforms, Microsoft and Apple, obviously we can’t
use Microsoft apps in Apple system and also Apple’s apps can’t run on Microsoft. However, that is only
in system nature. In terms of user interface design, we can use Apple designed apps in Microsoft system;
such as Safari and Quick Time and Microsoft designed apps in Apple; such as Microsoft Office. When we
are about to develop a system to be able to run across different platforms, we need to make sure that
the system can adapt the user interface of each platforms and also must able to support the different
features of interfaces and displays; such as Apple can support Retina display with different pixels density
and all that great features include and the system should be able to take advantage of all of those
gizmos inside Apple and the same way for Microsoft. The adaptive user interface means that, for
example, when we use Safari in Mac, the browser does not show the title and menus bars but when
using in Windows, the same browser show title bars and menus bars which are the main element of
Microsoft platforms.
Evaluation
Evaluation is simply a process of checking whether or not a particular user interface of the system is
usable and effective by a groups of experts and developers. When evaluating user interfaces, we can
and need to use several pre-defined evaluation techniques. Some of the famous evaluation techniques
are –
Heuristic Evaluation
Cognitive Walkthroughs
Pluralistic Walkthroughs
Heuristic Evaluation
Heuristic evaluation method is a kind of evaluation which can be used at design stage, coding and
testing stage of a system development. This evaluation usually involves up to four usability experts to
undertake the evaluation process. In this type of evaluation, users are not involve. This method primarily
check for effectiveness and efficiency of the system. The main advantage of this method is that this can
be conduct remotely. This method does not collect quantitative data and can be used on all system. The
process of this type of evaluation is that several evaluators run the evaluation separately and come up
with the usability problems. Because this type of evaluation is based on different views of different
individuals, it is very important to have several evaluators conducted the evaluation independently.
Heuristic evaluation can be done by selecting several usability experts and ask them to conduct
evaluation separately based on heuristic inspection guide and collect the evaluation results.
Cognitive Walkthroughs
Cognitive walkthroughs can be used to inspect the user interfaces in design, code and testing stage of
the information system. This type of evaluation usually include one to four usability experts and couple
of developers. This method does not include users. This method only checks for effectiveness of the
system and no quantitative data are collected and also cannot conduct remotely. This method can use
on any system however, it works best on systems that you can walk up and down without require any
new learning. This type of evaluation involves one or groups of evaluators inspecting a user interface by
going through set of tasks and evaluate its quality and usability. To be able to evaluate with this method,
8. you need to select the participants first and know that task to be examined and then which interface to
be evaluated.
Pluralistic Walkthroughs
This method of evaluation can only be used for design stage of the user interface. This type of evaluation
can include three kinds of participants, usability experts, developers and users. This method can check
for effectiveness and satisfaction issues of the interface design. As always this method does not collect
quantitative data and cannot conduct remotely and you will need a system that you can walk up and
down easily without having to learn any new things. This method is about a group of people composed
with usability experts, developers and users meet together and perform a walkthrough of the system
design.
Evaluation Technique Suitable for Crowdsourcing Healthcare
Based on the above theories about different evaluation techniques, the most suitable one for evaluating
the crowdsourcing healthcare system is –
Heuristic Evaluation
Heuristics evaluation is the most suitable evaluation techniques for the system because this method can
used at design stage, coding and testing stage of a system development. As the system is concern with
healthcare, the evaluation steps will need to test everything from design to testing as well as coding.
Another reason is that this method evaluate issues like effectiveness and efficiency which are the most
critical parts of healthcare system. Moreover, this method can use to conduct evaluation remotely from
another location which add extra benefits to the evaluators as well as the government which try to
develop such systems.
Conclusion
This coursework ask to make report on user interface design based on crowdsourcing desktop
application about healthcare. From the very start, we discuss about colour theory and font terminology
and decide which colours and fonts we need to use in system interface and then we move on to user
interface guidelines based on Apple and Microsoft and consider how to make the system to be able to
run across different platforms by giving examples of Safari Browser, Quick Time Player and Microsoft
Office. Obviously, we can’t make to run in both platform in system because of different in system
architecture but we need to make user interface to adapt in both system. The last but not least, we
come up on the evaluation phase, according to the nature of the system we are about to develop, the
best evaluation technique is heuristic evaluation along with different reasons; such as the heuristic
evaluation method can used for efficiency and effectiveness and can be conduct remotely which give an
edge for this type of system other than various types of evaluation methods.
11. References
Apple Inc., 2014. Apple Design Guidelines. [Online]
Available at:
https://developer.apple.com/library/mac/documentation/UserExperience/Conceptual/OSXHIGuidelines
/index.html
[Accessed 10 November 2014].
Microsoft Corporation, 2014. Microsoft Guidelines. [Online]
Available at: http://msdn.microsoft.com/en-us/library/windows/desktop/dn688964.aspx
[Accessed 10 November 2014].
Nielsen / Norman Group, 2014. Heuristic Evaluation. [Online]
Available at: http://www.nngroup.com/topic/heuristic-evaluation/
[Accessed 10 November 2014].
12. US Department of Health and Human Services, 2014. Usability.Gov. [Online]
Available at: http://www.usability.gov/what-and-why/user-interface-design.html
[Accessed 10 November 2014].