HUMAN COMPUTER INTERACTION

(TASK PERFORMANCE)

MEMBERS:

Al-Wahieb, Fahad Cristopher

Guevarra, Sherwin

Marcos, Mel Francis

Panlilio, John Lorenz

 Tumblr
(HCI GUIDELINES)

Visual Display Layout (General HCI Design)

GUIDELINES RATING REMARKS

Avoid cluttered display Everything is placed proportionally.
The amount of icons and the
amount of the text provided for the
caption on the social blogging site is
just fine. Proper spacing of each post
9/10 made the site looks minimal.

Place important items As it is a social blogging site, it is

consistently expected to exhibit post from
different users around the world.
With the trending tab of the tumblr,
it allows you to perceive short blog
8/10 post consistently from recent up to

least date of information posted.

Place important items at The essential part of the website is
top center located at the top portion. Wherein
the users of the blogging site could
easily maneuver the things they are
8/10 likely to do. Basically, at the top
portion of the site which is already
fixed is the important tabs just like the
search tab and the website’s logo to
 return users at the home page of the
blogging site.

Structure for easy The navigation is fixed at the top

comparison portion of the blogging site. This
serves as the marker or the
8/10 bookmark on a book. It simply allows
you to stay on track, so you won’t be
confused whether you are still on the
right page or not.
Establish level of All the post that you will see on the
importance dashboard is all about the blogs of
9/10 your friends. Blogs posted on the
dashboard is listed from the recent
ones up to the outdated posts.
Optimize display density For the website users, it is highly
appreciated because of the precise
resolution offered for the users. But in
smaller device like smartphones, it is
still manageable, but the
experience is far way better to be
seen on the website for more
information to display at a time. And
if the website is being resized the site
7/10 stays and couldn’t respond to the
desired resolution.

Align items on a page From the icons up to the small details

9/10 posted on the blogging site are
aligned properly. Or simply each
post has patterns of alignment.
Set appropriate page The home page has a thorough
lengths detailed information which includes
post from different persons. For the
8/10 home page, the page length is not
 precise as well for the trending tab,
but for the remaining tabs the page
length is limited.
Choose appropriate line In each post, captions are often
lengths short to limit the information posted
8/10 on the site. The blogging site doesn’t
occupy all the space, minimal
spaces on each post to separate it
clearly from the other post.
Use frames when The navigation bar is used to move
functions must remain 8/10 from one page to another. It is
accessible essential to toggle between tabs
without forcing to close the other
links.
Graphical User Interface (GUI)
GUIDELINES
Consistency of data-
entry actions
Minimal input action by
the user
Minimal memory load
on users
Compatibility of data
entry with data display
RATING REMARKS
9/10 A certain portion which is located at
the top part of the site is responsible
for taking data entries for the users.
The users can post text, images, links
etc. Each category differs with
content and design but with the
same approach.
8/10 The blogging site basically offers the
essential needs of a blogger. Input
actions are categorized in one
place for easy access of the users.
9/10 Too much information, and too
much visuals could also clutter the
minds of the users. In this case tumblr
had the minimalist approach for the
users. At just one look you could
easily determine what does the
icon’s do.
7/10 While busy typing the caption for the
blog you can see your blog at the
same time with the text you are
typing with. But at this case it usually
blurs out the back part so it will focus
only at the portion of the caption.
Clear and effective 9/10
labeling of buttons and
data-entry fields
Design of forms and 9/10
dialog boxes
Do not place 8/10
semantically opposing
entry or selection
options close together.
Match and place the 8/10
sequence of data-entry
and selection fields in
natural scanning and
hand-movement
directions
Each of the icons located on a
certain phase has their own labels.
These labels support the icon for an
easy understanding to the user. The
proper labeling wouldn’t muddle
the minds of the user.
A minimalist person could
exceptionally appreciate the design
of the whole website. Each forms,
icons, and dialog boxes are subtle
that indeed blends to the objective
of the website which is to attract the
bloggers.
Every post is enclosed with a
rectangular white shape to separate
to each other’s post. This is the way
to create spaces between each
other. Nothing overlaps and all post
has the same direction and pattern
to go along.
All the details needed on the
website are properly distributed. All
the icons utilized on the site matches
the vibe of the whole thing which is
a great deal for users who are
annoyed with cluttered view.
User with Disability (User Type)

GUIDELINES RATING REMARKS

Perceivable 8/10 Tumblr doesn’t impose any
complexity on its site. It is used to
display creative visuals from other
people. To those who are
enthusiastic with visuals this could be
a right blogging site. And for the
hearing purposes, tumblr also caters
blogs with videos or music to support
the whole website.
Operable 8/10 In a simplified way of giving
information to the users. Tumblr is
operable than it is expected. For
each tab located at the navigation
bar, users can search and discover
things on themselves by the help of
the blogging site.
Understandable 8/10 The blogging site has a lot to offer. It
doesn’t only give knowledge to the
users but also a
motivation to
strive on living.
Tumblr’s post is
exceptional, it Commented ["S1]:
also helps user to correct something
or prompt something about a
decision.
Robust 8/10 Tumblr could serve as a basis, or an
evidence for future use. By the power
of its task, a blogging site could be
use more than years after it is been
conducted. The minimalistic
approach of the website could
clearly interact for the other future
generations.