Is My Money Secure?

On February 16th, Kaspersky Lab reported what they called “The greatest heist of the century”. One billion USD was taken from a hundred banks across 30 countries (Image 1). The cyber-criminal gang, dubbed “Carbanak”, carried out the two-year-long heist. They avoided targeting the end user stole directly from the banks unnoticed.

Carbanak Reach

Image 1: Carbanak Reach

Online communications used by banks, as well as end users for Internet banking and online shopping are susceptible to various malicious attacks. A malicious third party can intercept credit card and bank information. The symmetric encryption methods us used to prevent interception of confidential messages. The symmetric encryption system uses the same key to encrypt and decrypt a confidential message. In order for sender and receiver to encrypt and decrypt a message, both needed the same key. And in order for both to have a same key, both ends needed to communicate this key. The problem was that this key that was communicated could be intercepted as easily as the encrypted message, leaving it vulnerable to a malicious third party.

Public Key Cryptography (PKC) solved this. In the PKC system a message is encrypted using a public key (available to everyone). This can only be decrypted using the corresponding private key (known only to a private receiver). One way to see this is the mailbox that we have at our homes. Everyone who has access to our address and post into the mailbox, but only those living in that home have the key to open it. Using the publicly available key, the sender sends a message that is encrypted using the public key. Only the receiver who has the corresponding private key can decrypt the message. This ensures confidentiality.

However, how do we know if an impostor is not sending the message? In order to ensure both message integrity (confidentiality) and non-repudiation (sender authenticity), Enveloped Public Key Encryption (EPKE) was used. This means that the sender encrypts his message both with his private key and the receiver’s public key. The public key encryption can only be decrypted by private key, vice versa. The following diagram (Image 2) illustrates how this system works:

Public Key Encryption

Image 2: Envelope Public Key Encryption system

The corresponding private keys are nearly impossible to decode by brute force (i.e. trial and error).

In order to further authenticate that the sender and receiver are not impostors, SSL Certificates are used. SSL certificates are like online ID cards that verify a website’s authenticity. Basically, it ensures that the website you are visiting is the site it claims to be. Certificate Authorities (CA) issues certificates to websites that are validated as authentic. The browser indicates a secure website with a lock icon or a green URL bar (Image 3). When a site is validated, an SSL handshake occurs between the sender and receiver, which determine the encryption used for communication, thus establishing a secure connection between the two.

Secure Browser Indication

Image 3: Browser URL bars

Despite these high security measures, why were hackers still able to pull off this billion-dollar heist? The gang relied on human carelessness. Kaspersky reported that in all observed raids, bank systems were compromised by spear phishing emails (Emails targeting specific organization that appears to come from trusted source). After gaining access, the gang carried out surveillance of bank procedures and stole confidential files. Every activity on staff computer screens were observed and mimicked precisely to siphon off the money without raising suspicion.

While security protocols have been set up, it is the human’s responsibility to be alert to suspicious emails and attempts to steal data via impersonation or interception. End users can ensure that they do not leave their information vulnerable by keeping their passwords secure and avoid repeated use of it. They can also avoid suspicious emails and software. Additionally, end-users should also check the authenticity of the website they are interacting with using the SSL certificate indicators.

References:

Introduction to Public-Key Cryptography. (2005, September 26). Retrieved February 23, 2015, from https://developer.mozilla.org/en/docs/Introduction_to_Public-Key_Cryptography

Computer Science Unplugged. (n.d.). Retrieved February 24, 2015, from http://csunplugged.org/public-key-encryption

Public Key and Private Keys. (n.d.). Retrieved February 23, 2015, from https://www.comodo.com/resources/small-business/digital-certificates2.php

Rouse, M. (2008, June 1). What is asymmetric cryptography (public-key cryptography)? – Definition from WhatIs.com. Retrieved February 23, 2015, from http://searchsecurity.techtarget.com/definition/asymmetric-cryptography

Description of Symmetric and Asymmetric Encryption. (n.d.). Retrieved February 24, 2015, from http://support.microsoft.com/kb/246071

Firefox. (n.d.). Retrieved February 22, 2015, from https://support.mozilla.org/en-US/kb/secure-website-certificate

Drozhzhin, A. (2015, February 16). The greatest heist of the century: Hackers stole $1 bln. Retrieved February 24, 2015, from http://blog.kaspersky.com/billion-dollar-apt-carbanak/

Lennon, M. (2015, February 15). Hackers Hit 100 Banks in ‘Unprecedented’ $1 Billion Cyber Heist: Kaspersky Lab | SecurityWeek.Com. Retrieved February 24, 2015, from http://www.securityweek.com/hackers-hit-100-banks-unprecedented-1-billion-cyber-attack-kaspersky-lab

Yadron, D., & Glazer, E. (2015, February 16). Hackers pull off billion dollar bank heist. Retrieved February 22, 2015, from http://www.businessspectator.com.au/news/2015/2/16/technology/hackers-pull-billion-dollar-bank-heist

Cyber bank robbers steal $1bn, says Kaspersky report. (2015, February 16). Retrieved February 22, 2015, from http://www.bbc.co.uk/news/business-31482985

3 Common Hacking Mechanisms You Need To Know

INTRODUCTION

When the Sony hacks went down late last year, sources pointed to a disgruntled employee who might have opened a back door to let the hackers (Guardians of Peace) in. The actual cause was later found out to be a malware software program that was installed on Sony’s computer infrastructure to erase data from the servers. With that in mind, here are some prominent mechanisms used by hackers today.

1. Distributed Denial of Service (DDoS)

DDoS attacks render a network unavailable to its users by overwhelming it with traffic from multiple sources. Attackers build a network of ‘botnets’, which are infected computers that spread malicious software through emails and websites that allow these machines to be remotely controlled.

The 3 common forms of DDoS attacks are Smurfs, Teardrops and Pings of Death. Smurf attacks broadcast the victim’s spoofed source IP to a computer network causing devices on it to send a wave of replies and flood the victim’s computer with traffic. Teardrop attacks send mangled IP fragments with over-sized payloads to crash operating systems. Pings of Death send malicious ping packets of a size great enough to crash target computers.

A recent example would be the case of a DDoS attack on Sony’s PlayStation’s network that caused it to go down (Dec, 2014).

2. Backdoors

Backdoors are infrastructures that bypass normal authentication, securing unauthorized remote access to a computer while remaining undetected. Backdoors often take the form of an installed program or default passwords that are not changed by the user.

A recent spate of password leaks point to the use of hacking through the use of backdoors in the form of third-party apps. Snapchat hackers obtained 100 000 private photos while Dropbox hackers obtained 7 million usernames and passwords. These were all obtained by exploiting third-party apps and websites with vulnerable security.

In the case of the website Insecam we see how default passwords provide backdoors to hackers. In November last year, Insecam displayed over 70,000 unsecured webcams from all around the world. The majority of them were CCTV and IP cameras that streamed on publicly accessible network ports using default passwords. This allowed hackers with web-crawling robots to gain admin access to the stream.

3. Man-in-the-middle (MITM) Attacks

MITM involves the hacker having the ability to both monitor and broadcast messages into a communication channel. For instance, a hacker within range of an unencrypted Wi-Fi access point can insert himself as the man-in-the-middle and intercept messages passing between two victims and inject new ones.

One recent case involves the use of the malware “Superfish” by Lenovo, which hijacks a user’s Internet connection and forces them to see ads approved by the company. This enables hackers to easily pose as trusted institutions (eg. Banks) to obtain sensitive information. In effect, hackers at a WiFi hotspot can intercept all connections from Superfish users.

With the proliferation of WiFi-enabled technological devices, hackers are now able to use devices to appear as that trusted WiFi network or even broadcast a fictitious network name. The danger lies in how accessible public WiFi is such that people are completely unaware how easily their information can be hacked. Decryption software on these hacking devices can easily work around security measures on WiFi networks.

CONCLUSION

With hacking being an ever present threat to personal and data security, government intervention leaves much to be desired in terms of enacting legislative laws that prohibit the use of hacking devices and provide stiffer penalties for cases of hacking. However the ultimate roadblock is how the nature of hacking transcends geographical boundaries and becomes increasingly harder to detect as technology rapidly advances.

As such, it would appear that solutions would be primarily user-centred at the moment. Straightforward solutions would be for users to use different passwords for different accounts; not to trust unverified websites and to minimize the transmission of sensitive information over unsecure networks where possible. The onus is largely on individuals to be responsible users and protect themselves from being vulnerable to hackers.

References:

Cook, James. “Here’s Everything We Know About The Mysterious Hack Of Sony Pictures,” Business Insider Singapore, published 4 Dec 2014.

http://www.businessinsider.sg/guardians-of-peace-hackers-sony-pictures-2014-12/#.VOvjlkJN2kg

Digital Attack Map, “What is a DDos Attack?,” Last accessed 24 Feb 2015. http://www.digitalattackmap.com/understanding-ddos/

Biggs, John. “Insecam Displays Unsecured Webcams From Around The World,” Techcrunch, published 7 Nov 2014. http://techcrunch.com/2014/11/07/insecam-displays-insecure-webcams-from-around-the-world/

BBC News, “Xbox and PlayStation resuming service after attack,” published 27 Dec 2014. http://www.bbc.com/news/uk-30602609

Stone, Jeff. “Millions of Lenovo PCs Vulnerable To ‘Superfish’ Hack; How To See If You’re Affected,” International Business Times, published 19 Feb 2015. http://www.ibtimes.com/millions-lenovo-pcs-vulnerable-superfish-hack-how-see-if-youre-affected-1821360

Martijn, Maurits. “Maybe Better If You Don’t Read This Story On Public WiFi,” Medium, published 14 Oct 2014. https://medium.com/matter/heres-why-public-wifi-is-a-public-health-hazard-dd5b8dcb55e6

“It’s always darkest before the dawn”

Dark design is a term coined to describe the practice of user interface (UI) or user experience (UX) techniques designed precisely to mislead or confuse the user into something that they neither requested nor wanted. A majority of these techniques could be relatively harmless and only leave an unnerving feeling of annoyance with the user i.e. subscription to newsletter. While others could cost the user much more financially and even professionally. Dark Patterns are not to be confused with Anti-Patterns, which are simply poor UI designs that result in a bad UX.

Who are you to make decisions for me?

This is the question that every user would have asked interaction designers. The world of marketing and design tend to butt heads occasionally. It is inevitable that sales and marketing departments will demand that designers make purchasing processes more persuasive and in some cases, use dark patterns in their marketing strategy. This type of marketing often leads to an initial surge of subscription/purchases but an extremely small repeat customer base.

While marketing can easily fall into such practices to meet sales targets, most companies understand that is it far more profitable to maintain a good brand image and present the option to up-sell should the user so desire. Amazon is an exceptional example of this, where they advertise related items immediately after something has been added to the cart.

Amazon

Throwing Light on Dark Patterns

Since 2014, the EU’s new consumer right laws ban certain dark patterns related to e-commerce across Europe. “Hidden costs” are now illegal, including things such as postage & packaging or a required subscription cost. Everything has to be brought out in the open and clarified before checking out.

The “sneak into basket” pattern is illegal as well. This behavior occurs when a user visits their basket after adding something they actually wanted and finds out that it’s been joined by another unrequested item. In the past, most savvy users would have noticed and removed these unwanted items. But now, such charges must be declared and cannot be added by default.

“Forced continuity” usually relates to a limited free trial of a product or service that requires you to sign up with payment details and at the end of the free trial period, you automatically become a paying customer without notice. This is now considered illegal.

Let there be light

While the concepts behind most dark patterns are powerful, they have the potential to create positive UX. Microsoft Word offers a positive UX, for example, by not only asking if the user wants to save changes, but also by highlighting “save”. This is an interaction design pattern known as a smart default.

Microsoft

Understanding your users and their goals on your website/service is paramount to creating a positive outcome for both parties. In learning what the user is visiting for, you can use that information to increase conversions and offer more relevant information to the user.

So how can we use dark design to value add to our website/service? Dark patterns are successful precisely because they are founded on good interaction design patterns. The best way to learn from them is to start with a dark pattern…and then remove its darkness.

 

Dustin Cartwright (2013) http://www.webdesignerdepot.com/2013/11/resisting-the-dark-side-a-primer-on-dark-pattern-ux/

Marli Mesibov (2013) http://www.uxbooth.com/articles/using-dark-patterns-for-good/

Marc Miquel (2014) http://uxmag.com/articles/throwing-light-on-dark-ux-with-design-awareness

Harry Brignull (2014) http://www.90percentofeverything.com/2014/08/26/some-dark-patterns-now-illegal-in-uk-interview-with-heather-burns/

Usability Testing – Are you positive about that?

Usability testing – the solution to bad design. Or is that so? It’s hard to deny that usability testing is good for evaluating how effective an interactive user experience on a website is, i.e. whether it is easy to learn and use, being effective for users to achieve their goals of using the website, and being an overall engaging and pleasant experience for users. But yet, there is just one thing that people sometimes fail to realize. Usability testing like any other science experiment, can be affected by external factors that contributes to biased results.

Yes, usability testing is biased.

No matter how “real” you emulate the environment for the usability testing of a website, it is still an artificial, controlled environment. It is at best a simulation of real life. Let’s get a better understanding of how reactivity bias can underlie usability testing:

Reactivity bias

Reactivity occurs when participants alter their feedback because of the awareness that they are being observed for what they do. It can also be present in situations where participants alter their feedback or behaviour to conform to the expectations of the experimenter/observer.

There are a few forms of reactivity bias and it is largely grouped under two categories – the observer effect and the experimenter effect.

The observer effect

“You and all those people online and in the next room are watching my every keystroke, I’m going to be more vigilant and determined than I ever would be to complete those tasks—I’ll even read the help text.”

Hawthorne-verbalizeYSTTImg src: http://www.widerfunnel.com/wp-content/uploads/2013/02/Hawthorne-verbalizeYSTT.gif

 

The tendency to exhibit a slightly different behavior when one is being observed is called the Hawthorne Effect, where participants become self-conscious of the presence of the experimenter.

Social desirability is also a form of reactivity bias whereby participants have the tendency to answer questions or give feedback in a more positive manner than it actually is. This is especially so when they know they are being observed and will usually want to be viewed favourably by others. This may end up with them over-exaggerating the positives of a web design. It might be that they do not want to seem like they do not know how to use the website, or they simply just tell you what they think you want to hear. Whatever the reason, it makes it hard to distinguish between participants who are responding factually, and those who simply distort their feedback in a positive manner.

Screen Shot 2015-02-13 at 22.35.27Img src: http://www.usabilitycounts.com/2013/08/20/five-things-ive-learned-from-usability-testing/

 

You then have another situation where participants observe and evaluate beforehand what they think is demanded from them for the outcomes of the usability test. This being called “Demand characteristics” refers to participants forming an interpretation of the experiment’s purpose and its desired outcome, which may result in them subconsciously changing their behavior to fit that interpretation. You then end up with your participant giving overly keen answers on how great the website works, instead of how it actually meet or doesn’t meet users’ needs.

The experimenter effect

“In the late 19th century a horse known as Clever Hans astonished audiences with his ability to stamp responses to arithmetic questions. He did this with startling accuracy. His infamy grew until an investigation determined that Hans was, in fact, only able to respond to subtle cues in the body language of his trainer.”

This phenomenon is a significant example of how the experimenter can largely affect the reliability of a usability test – both in the potential flaws of the test design, and also the bias the experimenter may unknowingly bring into the test.

Experimenter effect occurs when the experimenter unconsciously communicates his/her expectations to the participants. It could also be a case of confirmation bias where the experimenter interprets results incorrectly due to the tendency to prioritise responses that conform to his/her hypothesis, and overlook others. This is all a result of experimenters conducting the usability test with an idea of how they expect or desire the feedback to be. For example, your website may have a particular function which you are very keen in introducing to your users. This may lead you to interpret the usability of the function to be much better that it actually is, even if very few respondents actually expressed it to be so.

So, now what?

And so, the result of all this? With all these biases, it’s likely that you can get skewed usability test results, with more people saying that your website design is great, than the actual website views you get.

It may be hard to eliminate such biases, but we can always take measures to reduce them. You can start by emulating as best the environment users are normally in when they need to use your website. Also, as an experimenter, take careful note of your own expectations and beliefs, and be aware overall about how your decisions can frame the test design.

With that said, usability testing can generate useful results that are of most value if handled well. But it should not always be taken as a rule of thumb or yardstick for great website usability. There is never a foolproof test. If we are not careful in understanding the context that the participants and we ourselves are in, it’s highly possible that the results from the usability tests will be a flop – one in which it becomes a test merely for confirming our own beliefs.


References: 

Alla Kholmatova (2014). Collaborative User Testing: Less Bias, Better Research. Retrieved from A List Apart: http://alistapart.com/article/collaborative-user-testing-less-bias-better-research

Robert Hoekman JR (2009). The Myth of Usability Testing. Retrieved from A List Apart: http://alistapart.com/article/the-myth-of-usability-testing

Rob Kerr (2012). Better Experimental Design for Better User Testing. Retrieved from UX Booth: http://www.uxbooth.com/articles/better-experimental-design-for-better-user-testing/.

Jeff Sauro (2012). 9 Biases In Usability Testing. Retrieved from MeasuringU: http://www.measuringu.com/blog/ut-bias.php

Vicky Brown (2014). The active role of participants and facilitators. Retrieved from Nomensa: http://www.nomensa.com/blog/2014/active-role-participants-and-facilitators

Patrick Neeman (2013). Five Things I’ve Learned From Usability Testing. Retrieved from Usabilitycounts: http://www.usabilitycounts.com/2013/08/20/five-things-ive-learned-from-usability-testing/

Usability Testing: Are you positive about that?

Usability expert Rolf Molich, as part of his Comparative Usability Evaluation (CUE) research, conducted a usability test on the website http://www.hotmail.com with nine teams of participants in November and December 1998.

His findings reported that of the 310 different usability problems reported by the participants, the most frequently reported problem was reported by seven of the nine teams. Only six problems were reported by more than half of the teams, while 232 problems (75%) were reported only once. Many of the problems that were classified as “serious” were only reported by a single team. He also found that many of the participants had mixed in their personal opinions into what should be an objective finding, rendering them biased.

Based on this, Rolf Molich debunked the belief that results arising from usability tests are scientific—they aren’t, and in fact, most of the feedbacks fell short of being even useful. Why then should web developers today still conduct usability testing for their websites?

Case Study

British online fashion and beauty store ASOS.com is one of the many businesses that benefitted from usability testing. In order to reduce the number of abandoned baskets (incomplete/dropped purchases), the web developers conducted a usability testing for the website to find out the cause. Many of their participants commented on the Call to Action (CTA) button being the problem. Based on the result from the test, ASOS changed the CTA button for new customers from saying ‘create your account’ to ‘continue’.

What is interesting is that the web developers only changed the wording and not the content—customers still has to fill in the registration form upon clicking the button.

The change, although minor, proved successful, with ASOS successfully reducing the number of abandoned basket by 50%.

asos1

The old design. Customers tend to associate creating an account with having to fill in a form requiring many details, which was probably why customers, finding it a hassle, terminate their purchase upon seeing the CTA button. The web developers took this into consideration, and changed the wording for the CTA button.

asos2The new design. Note that the CTA button looks more simple and clean now. It doesn’t “nag” in your face to create an account before checking out the items.

This is not a standalone case—companies such as Google, Samsung and Sony continue to engage themselves in usability testing to evaluate their new and upcoming products. For example, Google conducted the widely known usability test on its Google Glass with some 8,000 participants. Although the date for consumer release is not announced yet, it is apparent that the feedbacks from the participants have helped Google in furthering development for the Google Glass.

 Why should usability testing be conducted?

As mentioned in the ASOS case study, a user-centered website means a better user experience, which in turns benefits the business. Usability testing should therefore be done whenever possible because:

  1. Without users, you cannot—by definition—do user-centered design.

Without users, a web developer can only design based on what he thinks is nice, and he/she will never know if it actually works. The web developers are NOT the only audiences. Only by engaging real audiences can they get real feedback.

  1. Web developers may ‘unsee’ the flaws in their design

Known as the IKEA effect, which states that ‘labour leads to love’, web developers may fail to see what is lacking in their design—their work of labour. By employing usability testing, participants will act as a pair of ‘fresh eyes’ to website, possibly pointing out flaws that the developers may not have noticed.

  1. Usability testing is fulfilling

Nothing beats having people tell you that your design works, right?

Conclusion

Usability testing is probably the best method there is out there to evaluate the usability of a website. Precisely because websites are designed for humans, web developers should not be complacent when it comes to finding out what people want.

Although usability testing has its flaws, it should not deter a web developer from conducting one— As limited as it may seem, the advantages that stem from conducting one should not be ignored.


Reference:

CUE-2- Hotmail. (n.d.) Retrieved February 11, 2015, from: http://www.dialogdesign.dk/CUE-2.htm.

Google Glass. (n.d.) Retrieved February 12, 2015, from: http://en.wikipedia.org/wiki/Google_Glass

Janet M. Six. (2014). Persuading Clients That the Need for User Research and Usability Testing Is Real. Retrieved from UX Matters: http://www.uxmatters.com/mt/archives/2014/10/persuading-clients-that-the-need-for-user-research-and-usability-testing-is-real.php

Moth, D. (2012). Eight user testing case studies that achieved amazing results. Retrieved from E-consultancy: https://econsultancy.com/blog/10922-eight-user-testing-case-studies-that-achieved-amazing-results/

Perfetti, C. (2003). Usability Testing Best Practices: An Interview with Rolf Molich. Retrieved from User Interface Engineering: http://www.uie.com/articles/molich_interview/

Vedantam, S. (2013). Why you love that IKEA table, even if it’s crooked. Retrieved from NPR: http://www.npr.org/2013/02/06/171177695/why-you-love-that-ikea-table-even-if-its-crooked


Interested in participating in usability tests for Google? Click here to find out more! http://www.google.com/usability/

“Are you positive about that?”– The trend of web design layout

It is now a changing-ever society. Everything is changing every day. Something will change a lot, while something will only have a tiny change that you cannot notice it. We even cannot know for sure what our tomorrow will become. One of your friends may ask you that “what about having dinner together tomorrow?” You may say: “Sure.” Then, your friend asks: “Are you positive about that?” Can you answer it firmly again: “Sure!”? Most of people may hesitate for a while, and rethink of your situation, respond to your friend: “Probably OK.”

This situation may happen every day in our lives. It is same with the web design layout. The web has changed a lot over the last decades. The two pictures below show the different kinds of web layout. For the first picture, you may find it is the most common layout when you surf online. These websites always consisted of a specific and apparent header, footer, sidebar and content area. It is more like there is a fixed pattern, and the designer just fills in different contents into the pattern. It is a pattern called pattern of focal point, which is a pattern designed based on the focus when humans scan and read through a design. (Steven Bradley  ,2011) However, this pattern over- emphasizes the evenly distributed and text-heavy content. It also makes many designers only cram the pattern without the creative ideas.

empati-design2161

At the same time, we may also meet the website like the second picture. It is a new layout emerging these years that does not stick to a strict formula. Based on Patrick McNeil, who is a Professor of Graphic Design at the University of Missouri St. Louis (2015) said, “The new norm as it were, is that there appears to be no fixed formula at all.”

Based on this situation, many website developers may find it is difficult to design the excellent website in the future due to the diversity and uncertainty. However, we can still forecast four most popular trends of web design layout in 2015. I will introduce them in detail. However, I have to stress again that I am not positive about that, and no one can be positive about anything, since the changing world. All of them are only observable high level trends.

Split Screens

Many websites split the screen using a vertical divide, (See the second picture above) since they may have two primary contents of equal importance, or try to express a kind of duality.

No Chrome

Many web designers have thrown away the extra chrome, such as the stereotypical header, footer, and other elements that separate the page into different blocks.   From the example of watch website, it is a quite creative layout design which is also suitable to the product itself. The consumers need to take a look of the product’s appearance carefully, and the website satisfies this kind of need immediately after potential consumers open the website. Simultaneously, it removes the block of traditional navigation to make the whole webpage look like wholeness, with the product shining in the page.

02

Modular or Grid Based

Just like the example below, this website divides the page into four different modules, and uses certain color-adjusting technologies to make the four parts connected. In this design, each module will flex following on the screen size. It is also a popular trend that taken a lead by the responsive web design, which is a design of webpage to make the page delivered in variable screen sizes. (“HTML Responsive Web,” n.d.)

04

Filling a single screen

It is also a subset of responsive web design. This kind of website will be designed to completely fill in the whole screen. They will not provide scroll bar, either. For this kind of website, the designer must make sure that the content has been focused and the hierarchy of different parts has been established. Since the visual hierarchy is one of the most important communication tools between the designer and the audiences. (Brandon Jones, 2011) The audiences will only focus on the most obvious content based on your subject arrangement. (see the example below)

09

To conclude, these four trends are like the building blocks of web design in the future. They can be assembled in many different ways. (Patrick, 2015) No one can tell you for sure what the website will become. Actually, in the world of web technologies, no one can tell you they are positive about anything. That is exactly where the attractive and exciting point of website is.

“Are you positive about that?” “No.”

 

 References

3 Design Layouts: Gutenberg Diagram, Z-Pattern, And F-Pattern – Vanseo

Design. (n.d.). Retrieved from

http://www.vanseodesign.com/web-design/3-design-layouts/

4 essential layout trends for 2015 | Webdesigner Depot. (n.d.). Retrieved from

http://www.webdesignerdepot.com/2015/01/4-essential-layout-trends-for-2015/

HTML Responsive Web. (n.d.). Retrieved from

http://www.w3schools.com/html/html_responsive.asp

Understanding Visual Hierarchy in Web Design.(n.d.). Retrieved from

http://webdesign.tutsplus.com/articles/understanding-visual   hierarchy-in-web-design–webdesign-84

 

 

 

I love Apple™: All hail flat design?

The launch of iOS 7 by Apple™ had definitely shaken the design industry. A company which has consistently stuck to its skeuomorphic principles decided to jump onto the bandwagon with other tech giants like Google and Microsoft to embrace flat design as an enhancement to its new user interface (UI). Though arguably iOS 7 is not as ‘flat’ of a design and critics have taken a jab at Apple™ for such ‘unpolished’ work, the idea though is that flat design seems to have more standing than just a trend.

Skeuomorphism and Realism

Before flat design, Apple™ had what designers would term as skeuomorphism, which is defined in the digital world as primarily the technique of using metaphors to induce familiarity. This was a design concept the company had been famously associated with and something the late CEO of Apple™, Steve Jobs loved. After all, it did made software easier to use as functions like buttons became instinctive so people could use Apple™ products with minimal instructions. For instance, compare the iPhone’s calculator with a skeuomorphic design and a flat design. The drop shadows and slightly beveled buttons on the left leave us with a more instinctive nature to press them rather than the flat design buttons on the right.

ios7_mini

While there is good philosophy behind skeuomorphism, there are also a lot of issues that come with using it in digital design. Take for instance how elements in the skeuomorphic design might be purely ornamental but non-functional, also known as the “uncanny valley” of user interface design. A bigger problem would be that when borrowing elements from a design’s previous incarnation, you also bring their limitations along, even though these limitations need not need to exist in the digital world. Take a look at the calculator app in the iPhone again. Despite having that realism with such a skeuomorphic design, Apple™ has also brought along the limitation of the calculator – single lined screen and limited buttons, which equate to limited functions, when there clearly is potential in the digital world to provide more than what a real-life calculator can offer. The bottom line would be that such a strong association triggered by skeuomorphism stops us from thinking out of the box and improving on what has already been done. (Perhaps this could be the result of why the calculator’s functions have not improved over the years.)

Hence with such issues comes the response of flat design. Not to say that skeuomorphism was totally irrelevant from the start, but perhaps it is time to move on to something else. As what John Ives said, “An entire generation of users have now become familiar with the touchscreen interface, it’s time to remove the “training wheels” — we no longer need skeuomorphism’s solution to a problem we no longer have.”

The iOS 7

With those “training wheels” off, digital design has now matured into flat design, embracing the real limitations of digital experience and doing away with the limitations of skeuomorphism.

As with the case of most digital flat designs, iOS 7 has been designed with a healthy use of margins and paddings, sans-serif fonts and multiple bold colours. Drop-shadows, textures, beveled buttons and all other unnecessary styling has been removed. As a result, the new user interface has a lighter and more breathable layout, allowing it to look friendly and approachable to users but without having the need to warp and mimic something familiar.

Also, the new UI brings forth focus to the content rather than competes with it, as in the case of skeuomorphism. One good example would be the new Weather app, where the flat design gives more attention to the current weather information due to the clean and ‘free’ layout, as compared to skeuomorphic design, which appears to have information artificially confined.weather

In order to create depth, iOS 7 has realistic motion and parallax effects in place of drop shadows and beveled buttons. One example would be how the Notification Center when slid down, bounces back as if rebounding from a fall.

drawer_slidedown

The Verdict

Indeed, when executed properly, flat design allows both function and beauty to be in harmony, bring user experience to greater heights. Even though critics have warned that minimalism when taken too far could have serious consequences to usability, but I believe that as flat design evolves, designers would be able to strike a better balance between minimalism and realism.

References

Mellas, C. (2013). Flat Design: Trend or Revolution? Retrieved from Webinsation: http://www.webinsation.com/flat-design-trend-or-revolution/

Clum, L. (2013). A Look At Flat Design and Why It’s Significant. Retrieved from UX Magazine: http://uxmag.com/articles/a-look-at-flat-design-and-why-its-significant

Turnbull, C. (2013, August 27). Flat Design, iOS 7, Skeuomorphism and All That. Retrieved from Web Design: http://webdesign.tutsplus.com/articles/flat-design-ios-7-skeuomorphism-and-all-that–webdesign-14335

Greif, S. (2013). The Battle Between Flat Design and Skeuomorphism. Retrieved from Flat Pixels: http://sachagreif.com/flat-pixels/

Bacic, H. (2013). Apple Is Embracing The Flat Design Trend – Are You? Retrieved from Forbes: http://www.forbes.com/sites/allbusiness/2013/09/09/apple-is-embracing-the-flat-design-trend-are-you/

Wong, K. L. (2013, September 18). Apple Design Goes Flat with iOS 7. Retrieved from Big Nerd Ranch: http://www.bignerdranch.com/blog/apple-design-goes-flat-with-ios-7/

Po, R. (2013). A Look At Microsoft, Google And Apple’s Approach To Flat Design. Retrieved from Hong Kiat: http://www.hongkiat.com/blog/google-apple-microsoft-flat-design/

I love Apple! – Differences in UI on OS X & IOS

Apple – the dominating leader in technology which design, develops, and sell consumer-electronic, computer software, online services and personal computers.

Despite the revolution and the fast changing pace in technology, Apple has been consistently designing and developing new products that never fails to appeal to the public. They not only produce hardware such as MacBook, iPads, & iPhones, but also software such as OS X & IOS, which provides apple devices with the optimized integrated environment.

In this write-up, i will elaborate on the difference in User interface between desktop and mobile devices, and providing a case study on Mail application to further elaborate on the differences.

Difference between desktop & Mobile devices

There are a handful of difference in desktop & Mobiles devices. However, in this write-up, only the more critical difference will be listed.

1) Smaller Screen

An average desktop screen size is around 19-23 inches and laptop is around 14-17 inches. Comparing to a phone which is typically around 5 inches and iPad which is around 9 inches. With the difference in screen size, it means that lesser information can be shown at one. Hence, the layout and design of the application must be different.

2) Touch Screen & keyboard

There is a distinct difference in how human interact with desktop and mobile device. There is a luxury of precision in desktop as it is being communicated by keyboard and mouse. However, in mobile phone, users communicate with it using touch features and gestures. There is no more luxury of precision and and hover events. Hence, the application has to be redesigned to suit mobile application.

Difficulties & Challenges

Difficulties that Apple faced is that there are too much information and features that are important for users when using the application. This is absolutely alright in desktop as there is a huge screen, keyboard and mouse for users to interact with it. The problem arise when it comes to mobile devices where the screen can only be that ‘big’ and the it uses touch screen interaction.

So the question is: what should be included in the IOS version and what should be omitted? Apple has chosen those core features to be included and those additional features to be excluded from the IOS version. Furthermore, studies has been done to design it in a way that details can be easily seen in the small screen and users can easily navigate throughout the application. Controls and buttons are also designed in a simple and accessible way so that users can use the application easily.

Case Study : Mail

Email is one of the essential tool for users. Apple has created Mail application in OS X in a comprehensive and powerful application that allows users to create, receive, prioritize, and store email, track action item and events, and create notes and invitation.

When it comes to designing Mail application in IOS, inevitably some of the features and functions have to be omitted. Apple focuses on the core functionality of Mail on the desktop, helping people to receive, create, send, and organize their messages. Mail on iPhone delivers this condensed functionality in a UI tailored for mobile experience that includes:

  • A streamlined appearance that puts people’s content front and center

  • Different views designed to facilitate different tasks

  • An intuitive information structure that scales effortlessly

  • Powerful editing and organizing tools that are available when they’re needed

  • Subtle but expressive animation that communicates actions and provides feedback

Mail on iPhone isn’t a better application than Mail on Desktop; rather, its Mail redesigned and customized for mobile users to provide them with the most user-friendly and convenient interaction between them and their mobile phone.

Apple took the following steps to ensure that users have the best Mail experience in mobile:

  • Distinct, highly focused screens. Each screen displays one aspect of the Mail experience: account list, mailbox list, message list, message view, and composition view. Within a screen, people scroll to see the entire contents.

  • Easy, predictable navigation. Making one tap per screen, people drill down from the general (the list of accounts) to the specific (a message). Each screen displays a title that shows people where they are, and a back button that makes it easy for them to retrace their steps.
  • Simple, tappable controls, available when needed. Because composing a message and checking for new email are primary actions people might want to take in any context, Mail on iPhone makes them accessible in multiple screens. When people are viewing a message, functions such as reply, move, and trash are available because they act upon a message.
  • Different types of feedback for different tasks. When people delete a message, it animates into the trash icon. When people send a message, they can see its progress; when the send finishes, they can hear a distinctive sound. By looking at the subtle text in the message list toolbar, people can see at a glance when their mailbox was last updated.

In a nutshell, UI design between desktop & mobile has to differ. Desktop version has the luxury to me more concise and complete while mobile version has to be compact and straightforward. Inevitably , studies has to be conducted to understand what and how the behavior of humans are toward interacting with such gadgets. Then, a layout that suits the users can be designed.

References

http://en.wikipedia.org/wiki/Apple_Inc.

https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/DesktopToiOS.html#//apple_ref/doc/uid/TP40006556-CH51-SW1

http://www.paradoxlabs.com/mobile-vs-desktop-10-key-differences

iOS7, bold new direction or flat fashion victim?

It seems as though any time you hear about user interface design these days, you can’t help but come across the term flat design.

So, what exactly is flat design?

For those who haven’t heard of the term, flat design refers to a style of interface design in which elements lose any type of stylistic characters such as drop shadows, gradients, textures, or other type of design tools that add depth to illustrate a three dimensional illusion.

The transition to flat design – iOS7

The new iOS6 to iOS7 redesign is bold. It’s a radical shift towards a polar opposite direction from its felt, faux-leather, lifelike user interface aka Skeuomorphism. While many designers expected Apple to move towards flat design, not many expected what they saw.

Apple-Flat-Design-Images

Critics have assailed Apple by claiming that the iOS7 looks unpolished, something that Apple is not known for; while supporters claim the iOS7 is not the final look and merely a transition phase. Either way, Apple is loosely following the flat design trend after Microsoft and Google.

Let’s compare a typical home screen between iOS6 and iOS7 and look at its complications…

ios6-7

This time, Apple deviates from the standard design patterns. Without borders on buttons, the interface makes it harder to scan because of the lack of visual distinction between its elements. In most cases, drop shadows, gradients, textures and other ‘non-flat’ user interface elements hold significant informative value in establishing affordances in interface.

 Affordances matter, and why?

The bottom line was that objects should be self-documenting. If you need a sign to tell someone what to do, you didn’t think through the process well enough.

A button that looks like a button brings in the right mental model to the minds of users in helping them understand the connection, and their goal – that’s a highway to interface efficiency. However, Apple’s using bare text became problematic, as separating actionable buttons from content is visually difficult. Apple using one typeface and relying on color was a poor decision, making it tough to trigger actions.

apple-iphone-ios-7-06

Misusing color & contrast

Flat designs are dependent on color & contrast as the indicator of interaction in interfaces. That’s clearly not an easy task as colors have perceived meanings and may lead to certain physiological reactions.

Well for iOS7, its saturation has been cranked up, so has the lightness. Rather than a mature and highly detailed design, it looks a lot more like an elementary children’s design. Bright colors, simple shapes, very rounded edges everywhere.

The colors are blown out and saturated so much that it makes it notably more difficult to look at and to distinguish shapes than it was previously. The level of detail in an iOS app icon previously could be very high, especially with the introduction of retina screens. Yet with the new iOS7, that detail is gone. Take for example the settings icon that used to be the most visually detailed icon that breaks the well-established convention of representing settings with a gear, now appears as the guts of an engine or some strange torture device.

Lacking the beauty of typography

It’s absolutely great that flat designs rely on typography as the primary carrier of aesthetic value and information. Who doesn’t love beautiful typography?

In iOS7, everything went from bold to light weight. Since we’ve also lost the shadow that makes the text stand out against any background, it then makes it harder to read than before. With that said, it is proven that the lack of typographic skills will be more visible than ever in a bare flat design.

Visual structure & inconsistencies

It’s now very hard to tell the difference between the header and the content. Both generally use the same colors and very subtle variants of gray/white. Buttons no longer look like buttons – they’re blue texts. Sometimes, you will see strong shadows that look out of place like on the ON/OFF toggles. Also, the Safari’s icon gradient goes from light to dark. Contrast that to Mail’s icon, which goes from dark to light, and also sits on a filled background. Why? Even weirder, there are paper textures on the Reminders app while iBooks uses wood.

White-600x355

Flat design gone too far?

We can’t deny that flat design does have some functional problems – With affordances getting tricky especially when dealing with call to action buttons and icons that refuses to help user experience in some cases, and flat design that espouses the use of bright and bold colors which is problematic for about 10% of the people on the planet.

Actually, it depends…

The likely goal of the trend in moving towards flat design was to place a higher focus on content while eliminating distractions from UI elements.

In most simplistic terms, the more design elements you add, the busier the design will be. Gradients, shadows, patterns, and textures can bring a design to life, but too much of it can also quickly clutter it up into a huge mess.

Flat design the future?

Flat design is large and in charge right now because of the focus on user experience. It’s all about user experience everywhere. But is flat design the future? That’s pretty much impossible to say as in a few years, we’ll all be focusing on something bigger and better that’s about to come along by then. After all, that’s the cycle of trends.

Check out this parallax scrolling website – Flat Design VS. Realism
http://www.flatvsrealism.com/

Flat Design is not only a design style but also a communication way.
https://www.youtube.com/watch?v=wc59EDQ_qkQ

iOS 7: bold new direction or flat fashion victim?
http://www.stuff.tv/sg/apple/ios-7-bold-new-direction-or-flat-fashion-victim/feature

A Look At Microsoft, Google And Apple’s Approach To Flat Design
http://www.hongkiat.com/blog/google-apple-microsoft-flat-design/

References:

To, M. (2013, June 11). IOS 7 And The Transition To Flat. Retrieved February 4, 2015, from http://blog.mengto.com/ios-7-transition-flat/

5 Dangers of Flat Design – UXPin. (2013, June 28). Retrieved February 4, 2015, from http://blog.uxpin.com/2526/5-dangers-of-flat-design/

Bacic, H. (n.d.). Apple Is Embracing The Flat Design Trend – Are You? Retrieved February 4, 2015, from http://www.forbes.com/sites/allbusiness/2013/09/09/apple-is-embracing-the-flat-design-trend-are-you/