Consistency and Standards

"Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions."

One of main guidelines that must be followed in designing user interface is consistency. This one will guide us to build user mental in understanding how the system works. It's implemented by using standards which are defined first from the very beginning.

Back to sriwijayaair.co.id. There are some of inconsistencies in their site sections.

Here's some of them...

1. Link and not link are displayed as same type of image in the same section

People will mostly click on the logo banks and "Berita" title on the left and the right side of this picture and expect to open a new page about it. But the truth is, these are only images, not clickable and definitely placed on a wrong place.

Pict 1. Links and Not links are just the same 

Recommendation: Separate the image from clickable image.
It's 1/4 for Severity Rating. Better keep an eye from what you code, dev!. 

2. Indonesian in English menu

Honestly, I'm bored to evaluate the News section over again, but this one should be noticed by developer. As for you know, I'm using English as the site language, but I found some of the texts are still using Indonesian. Take a look at this one.

Pict 2. There's still Indonesian in english 

Recommendation: Change "Berita" to "News". It's just as simple as that, dude.
Severity Rating? Well it's 1/4

Those two problems are found on this website. If somehow you, the CEO, or manager, or even developer of this site, please give it a time to fix these.

Thank you for reading the second post of Heuristic Evaluation :)

Fariz Keynes

Visibility of System Status


"The system should always keep users informed about what is going on, through appropriate feedback within reasonable time."

The first thing that’ll be evaluated is this subject. On websites, visibility will keep users stay informed about where they are in relation to other pages on the site. This allows them to have a mental map of the site and easily navigate both to new pages and ones visited previously.

Sriwijaya.co.id has many mistakes in this area, and I’ll tell ya some of it.

 1. Website title on every page is always same.

 Every webpage has its own title, and titles are used to keep us informed about what pages we are viewing. Let say that I’d like to open a website pages in many tab for each pages and I unconsciously open so many tabs, then this so called title here are there for me to distinguish pages that I want to view next. But this feature is not applicable in this site because every title on each page is always the same: Sriwijaya Air. And it's bad ):

Pict 1. Same webpages title, bad bad bad girl!

Recommendation: Change the title in every pages to match with its content

 And for this mistake, I will give 2/4 for Severity Rating. For me, it's a minor problem, because I believe not everyone wants to find or book a flight ticket from the airline main site.

2. Home in navbar is always active

One of the similar problem on this site is the highlighted navbar to show what page are being viewed. In this site, every page you open will inform you that you are in "Home" of the site. You can check it below, y'all!

Pict 2. Homepage
Pict 3. About us page
Pict 4. The Contact us page

Recommendation: Change the active navbar on every page to its current page.

 It's even a worse mistake. For me, it's 3/4 for Severity Rating

 p.s I kinda hate the stewardess' smile (it's creepy), so the cropping area on picture 4 is on purpose.
3. News section doesn't tell you when there's nothing to show

 Not really a problem, but by seeing this section, at least the site should tell us that there's no news. By leaving it blank, it may distract some visitors, like me huehuehue.
Pict 6. Uninforming news section
Recommendation: Display a message such as "No news to show" or vice versa.

 As I already said before, it's not really a problem that need to be fixed immediately or be given high priority, so it's 1/4 for Severity Rating

 Okay uh, that was one of my long post and it really gave me a hard time to think. Don't judge my evaluation because I honestly didn't really think it that way. Und danke, Leute!!

 For those who would want to know what Severity Rating is, you can look up for more info from the old man Jenkins Nielsen's webpage: Severity Rating for Usability Problem

Fariz Keynes

Ciao Bella! Willkommen back to my Secret Recipes. I know it has been so long since the last post und this post is also about course stuff, so it wouldn't be a long post even it's actually a long one.Okay, let's get it started.


In this post, I will be doing a heuristic evaluation on Sriwijaya Air main website. For you guys who doesn't know what this site is about, yeah, well, It is about main site of one of Indonesian airline which based in Jakarta. You can book a flight ticket, and get some promotion info, and basically, anything about this airline company will be written on this site.
The company logo

 Und, what is this so.. called Heuristic Evaluation?

Heuristic Evaluation (HE) is an inspection technique, not unlike doing a code review to find
bugs in software, but it is a bunch of rules that distill out the principles of effective user interfaces. This technique was invented by Jakon Nielsen.

There are 10 guidelines in this technique, and hier it is based on the old man's website

1. Visibility of system status
The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.

2. Match between system and the real world
The system should speak the users' language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.

3. User control and freedom
Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.

4. Consistency and standards
Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.

5. Error prevention
Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.

6. Recognition rather than recall
Minimize the user's memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.

7. Flexibility and efficiency of use
Accelerators -- unseen by the novice user -- may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.

8. Aesthetic and minimalist design
Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.

9. Help users recognize, diagnose, and recover from errors
Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.

10. Help and documentation
Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large.

And for my test subject, sriwijayaair.co.id, I will only be using 5 of them to evaluate it. You can read the full post on these links below :
1. Visibility of System Status of sriwijayaair.co.id
2. Consistency and Standards of sriwijayaair.co.id 
3. Error Prevention of sriwijayaair.co.id
4. Match Between System and Real World of sriwijayaair.co.id
5. Help users recognize, diagnose, and recover from errors of sriwijayaair.co.id




Fariz Keynes

Hi readers, wie geht es Ihnen?

Tonight I'm not gonna to publish a long post. ):

This is basically another task from Human-Computer Interaction course about how to visualize content to be easily understandable  by user.

I'm visualizing data from bps.go.id about AIDS cases and its mortality in Indonesia by year of 2008 to 2011.

"But Fariz, why it has to be data about AIDS?"

Lemme tell ya honey, I'm actually a medical student who found myself majoring in Computer Science. Since I love talking about health problem and diagnosing people, this data I found surprisingly suited my hobby :)

Created with infogr.am, here's the result. 
And don't forget to read my blog so I can be more popular than the plastic. Love y'all, peace buhbye

Fariz Keynes

Hey guys, it's me, Fariz A-gain #yeaaah!!! *crowd gets louder*

 Okay, enough for it. 

 Today I'll be focusing my post to Data Communication and Computer Network subject, specified to Terminal, and fyi we're not going to talk about terminal like bus station, airport, but we're gonna be talking about terminal as one of computer interface, a command line interface.

 Terminal is one of command line interface in computer. It exists in OS X and Linux, and maybe other OSes. For those Windows user, you don't have terminal on your system, but instead you'll have CMD. But don't worry, it's a same thing as terminal with a different command of course.

 Terminal can do many things. Most of the things, actually. Like you can copy/move files, create directories, set up your computer, install/remove packages, and even download files. And for the sake of time, let's skip to the part where we can download files from network to our computer using a simple command called wget.

 wget is the non-interactive network downloader.
here's some description abot this command:
      GNU Wget is a free utility for non-interactive download of files from
       the Web.  It supports HTTP, HTTPS, and FTP protocols, as well as
       retrieval through HTTP proxies.

       Wget is non-interactive, meaning that it can work in the background,
       while the user is not logged on.  This allows you to start a retrieval
       and disconnect from the system, letting Wget finish the work.  By
       contrast, most of the Web browsers require constant user's presence,
       which can be a great hindrance when transferring a lot of data.

       Wget can follow links in HTML, XHTML, and CSS pages, to create local
       versions of remote web sites, fully recreating the directory structure
       of the original site.  This is sometimes referred to as "recursive
       downloading."  While doing that, Wget respects the Robot Exclusion
       Standard (/robots.txt).  Wget can be instructed to convert the links in
       downloaded files to point at the local files, for offline viewing.

       Wget has been designed for robustness over slow or unstable network
       connections; if a download fails due to a network problem, it will keep
       retrying until the whole file has been retrieved.  If the server
       supports regetting, it will instruct the server to continue the
       download from where it left off.

 P.S I honestly didn't read (and want to read) that.

 In terminal, we also have syntaxes and options and here's how you do it when using wget:
wget [option]... [URL]...
 
Is it too long to read? well let's download something, shall we?
I am going to download this jam from 1993 (wow, I haven't even been born yet) by Michael Bolton...

Downloading using wget
Command line shows a simple information. In this wget case, you can get the download progress, download speed and also (one of my favourite feature) an eta (Estimated Time of Arrival) :)

When you press Enter, it refreshes you current download status. But you don't have to do that because it automatically shows the current progress.
Enter pressed 4 times

 And when your download is finished, you can get message like this:

 2015-03-25 11:05:20 (17,4 KB/s) - ‘5755d.mp3’ saved [6262332/6262332]

Download finished
There's more things you can do with wget, but I think I'm not gonna doo dee detail it in this post. You can add options on your downloaded file by using the syntax I mentioned before. and you can get the option code using this command in your terminal field:

man wget

And yeah, that's one of my long post about computer stuff. Thank you for reading such a long boring post about this subject.

And don't forget to read my blog so I can be more popular than the plastic. Love y'all, peace buhbye *wink wink*

Fariz Keynes

Oh kay, this is my first post of Human-Computer Interaction assignment.

The intro

We, as bloggers of course often go to websites looking for… yeah, many things. But you might (at least once) notice that there’s a website that just simply easy to use and navigate to look the information for, and there’s one website that can make you feel like “Ugh, where can I find that post?” or “This stupid web owner doesn’t even know how to mix colors, it’s hurting my eyes” and “I can’t read those posts because I have half color blind, and the text is not contrast”.

Yeah, we definitely have gone through that probs. And luckily for you guys, bloggers, readers, or anyone who’s interested in designing websites or webpages, I’m gonna give y’all some points for you to notice.

  1. Usability
  2. Navigation
  3. Graphic Design
  4. Contents
  5. Compatibility
  6. Loading Time
  7. Accessibility, and
  8. Interactivity
I am going to use this website as an example (whether it’s good or not-really-good-and-need-some-improvements)
www.houzz.com

Houzz started with a house. It’s what is written on the page. The founder, Adi and Alon, built this site because they wanted to remodel their home. They started reading stack of magazines and referrals for home professionals. But those ways failed to make their dream a reality. ‘Kay, cut the cr*p already, here’s the analysis.

USABILITY
The homepage
Houzz is a website for home remodeling and design, bringing homeowners and home professionals together in a community. You can find any home ideas, room ideas, and you can even ask for consult with home professionals. It’s great, isn’t it? I’ll give 9/10 for the ideas.

NAVIGATION

The navbar

Search feature
Houzz has pretty useful navigation bar. You can easily find any room ideas in the navigation bar. Just hover your mouse on it and voila, you can have every detailed about the room. Also, the search bar has many features so you can easily jump to your preferred section. And it’s 9.2/10 for me.

GRAPHIC DESIGN

It’s all white, simple, with beautiful font selection. The only colorful thing in this website is the photo. They shot adorable photo ideas. And it’s eye catching. 8.8/10 for this one.

CONTENT

Don't tell me this site is useless, cause it's not, really. This site will help you build your dream house. 9.0/10.

COMPATIBILITY

Houzz works perfectly on today's screen resolution. I guess you need javascript enabled first and you can get the animations. Sadly, this site isn't really responsive for mobile viewing. Look at this screenshot below:

Mobile viewing
But don't worry fellow, you can get the mobile application of this website which is available for both Android and iOS. Well, maybe it's 7.0/10.

LOADING TIME

Fella, please understand that you're accessing full-image content website. So, it really does take time to open this site up. Unless you have better internet connection. :)
I'm giving 8.4/10

ACCESSIBILITY

Houzz doesn't really provide good design for people with disability. For example, the text color and size of course match with the white background, but it doesn't provide good contrast for those who have eye disability, like old people. Maybe it's 7.7/10.

INTERACTIVITY

Houzz provide an impressive animations. The first thing you'll notice is that there's a slideshow photos on the homepage. You can see how beautiful the transition between photos. The text changes color when you hover your mouse on it.

When you scroll down the page, you'll see the navbar sliding up out (disappear) and when you hover back your mouse,  the navbar will come sliding down again, and it's quite beautiful. For those points, I'll give it 9.5/10.

(end of the analysis)

I'm calculating... (beep, beep, beep)
From those numbers, I'll give Houzz

8.5/10


Adi and Alon, do deserve credits for the idea, but the website designer deserves more credits, applause, and any good things because (s)he can provide an efficient way for users to interact with the site without having any problem (tested on me, as the user).

Houzz is a great example for building a good website.

P.S. I love the content so much :*

 P.S.S. I also have commented on several fellow bloggers too, like Eylien Desy Novita's, Utari Ambarwati's, and Ihsan Fikrie's

Thank you so much for reading a such a long post for me :') (it's gonna make my day, ya know)
And don't forget to read my blog so I can be more popular than the plastic. Love y'all, peace buhbye :*

Fariz Keynes