Interface Selection
Options
Prep. Jasleen D. Otinez
What is selection in User interface design?
• Selection controls such as radio buttons, checkboxes
and switches allow users to control all kinds of
options, settings and situations. The size of the
selection controls depends on the base font size used
in each case, which can be adjusted depending on
the particular viewport width.
What are the interface
options?
• User Interface Options (UI Options) provides a way
to enhance or improve website usability, flexibility,
and accessibility by providing a way to customize
and control aspects of a website without the need
for additional software or tools.
User Interface Elements:
User interface elements usually fall into one of
the following four categories:
1. Input Controls
2. Navigation Components
3. Informational Components
4. Containers
1. Input controls- allow users to
input information into the
system. If you need your users
to tell you what country they
are in, for example, you’ll use
an input control to let them
do so.
• 2. Navigational components -
help users move around a
product or website. Common
navigational components
include tab bars on an iOS
device and a hamburger
menu on an Android.
• 3. Informational components
share information with users.
• [Link] hold related
content together.
Hardware Platforms
• A hardware platform is a set
of compatible hardware on
which software applications
can be run. Each specific
hardware platform has its
own machine language, and
programs must be built
specifically for a platform that
involves a standardized type
of processor and associated
hardware pieces.
• The Hardware Platform Interface (HPI) is an
open specification that defines an application
programming interface (API) for platform
management of computer systems. The API
supports tasks including reading temperature
or voltage sensors built into a processor,
configuring hardware registers, accessing
system inventory information like model
numbers and serial numbers, and performing
more complex activities, such as upgrading
system firmware or diagnosing system
failures.
History of Hardware
Platforms
• Primary motivator for the development of the HPI
specification was the emergence of modular
computer hardware platforms and commercial off the
shelf (COTS) systems in the late 1990s and early
2000s. This included CompactPCI platforms and, later,
the AdvancedTCA and MicroTCA(xTCA) platforms
standardized by the PCI Industrial Computer
Manufacturers Group (PICMG).
HPI Specification History
Specification Label Date of Publication Notes
SAI-HPI-A.01.01 October 7, 2002 Original HPI specification
Major revision to the base HPI
specification. Addressed
SAI-HPI-B.01.01 May 3, 2004
implementation and usability issues in
original specification
SNMP MIB for accessing HPI
SAI-HPI-SNMP-B.01.01 May 3, 2004
implementations
Minor revision to the base HPI
SAI-HPI-B.02.01 January 18, 2006 specification. Added FUMI, DIMI and
Load Management capability.
HPI to AdvancedTCA mapping
SAIM-HPI-B.01.01-ATCA January 18, 2006
specification
Minor revision to the base HPI
SAI-HPI-B.03.01 October 21, 2008 specification. Enhancements to FUMI;
some new API functions
Minor corrections to the base HPI
SAI-HPI-B.03.02 November 20, 2009
specification
Major revision to the AdvancedTCA
mapping specification. Includes
SAIM-HPI-B.03.02-xTCA February 19, 2010
mapping for MicroTCA platforms as well
as AdvancedTCA
• PICMG, or PCI Industrial Computer
Manufacturers Group, is a consortium
of over 140 companies. Founded in
1994, the group was originally formed
to adapt PCI technology for use in high-
performance telecommunications,
military, and industrial computing
applications, but its work has grown to
include newer technologies. PICMG is
distinct from the similarly named and
adjacently-focused PCI Special Interest
Group (PCI-SIG).
• Arduino — Arduino is the
ubiquitous name in the
electronic development
space. The company offers a
range of open-source
development kits,
microcontrollers, and
software tools for building
connected products.
Let’s take a look at the most common UI
elements you’ll run into.
1. Button
Traditionally displayed
as shapes with a label,
buttons tell users they
can perform a
particular action, like
submitting.
2. Card
Super popular these days,
cards are small rectangular or
square modules that contain
different kinds of information
—in the form of buttons, text,
rich media, and so on. Cards
act as an entry point for the
user, displaying different kinds
of content side by side which
the user can then click on.
3. Carousel
Carousels allow users to browse
through sets of content, like
images or cards, often
hyperlinked to more content or
sources. The biggest advantage
of using carousels in UI design
is that they enable more than
one piece of content to occupy
the same area of space on a
page or screen.
4. Checkbox
In UI design, a checkbox
appears exactly as the name
suggests: a little square box
on the screen that the user
can check or uncheck. A
checkbox allows users to
select one of multiple options
from a list, with each
checkbox operating as an
individual.
5. Comment
Pretty common around
interfaces today, comments
display content users input
into the system in
chronological order. You’ve
seen them around social
media engines and on blog
posts.
6. Dropdown
This controversial UI
element allows users to
select an item from a list
that “drops down” once
we click on it.
7. Form
Forms help users
input sets of related
information into the
system and submit
them. Think of all the
boxes asking for
shipping details when
you order something
online.
8. Icon
Icons are images used to
communicate a variety of
things to users. They can help
to better communicate
content, or can communicate
and trigger a specific action.
You can learn how to design
icons from scratch in this
step-by-step guide to the icon
design process.
Wire Framing
• A website wireframe, also
known as a page schematic
or screen blueprint, is a
visual guide that represents
the skeletal framework of a
website. The term
wireframe is taken from
other fields that use a
skeletal framework to
represent 3 dimensional
shape and volume.
Rules
Creating Wireframes
Do not use colors. If you would typically use color to
distinguish items, instead rely on various gray tones
to communicate the differences.
Do not use images. Images distract from the task at
hand. …
• Use only one generic font. Typography should not
be a part of the wireframing discussion.