However shopping on a mobile device can be a nightmare because of the screen size and other limitations, for example mobile shoppers need to be on high speed of 3G connectivity to be able to experience mobile shopping to its fullest from browsing till purchase. From the web development perspective, how to create better mobile shopping experience?

Below are some 5 tips to create a great mobile shopping experience based on my observation.

Speed

Have you ever encountered a limited time sales on your favourite products online? Browsing their websites on mobile and the process takes forever to load, and that’s really frustrating. Scenario: While waiting, a Whatsapp message comes in and you abandon the shopping cart and you forget altogether what you had been trying to buy.

Here are some tips web developers could do to improve speed and performance for e-commerce websites:

• Optimise pages so that they load fast hence users on data roaming to browse won’t bounce immediately and leave your site. According to online survey (Dyn) 3 seconds is the longest user will wait for a shopping website to load. Nearly half of users expect a web page to load less than that.
• Try to optimise content, code and the server. Remove unused Javascript and keeping the HTML/CSS as tight as possible to strike the balance of quality against images file size.
• There are several tools you can use to assess and analyse the speed of your website, for example Gmetrix and shown here is Google Pagespeed.

Cut the Fat

Mobile shopping experiences are the best when the focus is put primarily on the products. After all, it is about selling products anyway!

• Don’t clutter your page with excess navigation, excess information or excess promotions. Hide and remove all unnecessary parts. Let the user shop without delay and difficulties. For example, use hamburger menu for navigation to save space and not distracting user with unnecessary graphic or texts.
• Organise information nicely and clearly. Mobile users don’t want to have to hunt down what they’re looking for. Make things obvious to your visitors. Provide all necessary information where users should see your products, view very brief product information, and be able to proceed to checkout. Label tab or categories clearly, it will be very helpful.

To put it another way, imagine what would happen if you put all your clothes in your closet and not in folding form, just scatter them all over the place. What would happen when you’re in a hurry and trying to find your socks? Stressful and frustrating, isn’t it? That is roughly what it’s like when you clutter your page with so many things in a small screen size.

Quality Images

Because of small screens on mobile devices, products images should be big and of high quality. Good quality images are a key tool for online sales. The products need to be seen in detail. Blurry and small images make it difficult for users to browse your online store and this will annoy them, hence the bounce in the website.

• Larger images and good quality will make the user keep browsing your products and attract them more to buy the product.
• Make the shopping experience easy by preparing a multiple close up product image.

Big and beautiful images will embrace the limitations on mobile shopping. However be careful here, because big images means large data and slower browsing. What you need to have are images which are big, visible and nice enough to see on small screen size but keep the file sizes low and properly compressed.

Tips on image size:

• Typically, large high quality images should be kept between 100K and 60K.
• Smaller images should be closer to 30K and lower.

Legible Buttons

Mobile buttons should be thumb friendly. When your users are ready to be converted into customers, make it easy for them to finish the process.

• Make the call-to-action buttons noticeable. The checkout button should be big and available anytime an item is in the cart.
• Also take note that by using big buttons, jumbo sliders and giant input fields will increase user engagement and reduce bounce rates rather than using standard input fields.

Simple Processes

This is the most important factor in mobile shopping. Users want to go quickly from start to end. When designing a checkout experience, the step should be as simple as possible. The fewer steps required to make a purchase on a phone, the better.

• Speed out the checkout process by eliminate unnecessary steps such as user registration. Too many steps can break the flow and user will likely abandon the shopping process.
• Users should be able to find, evaluate and purchase an item as quickly as possible. If the checkout takes more than a couple of steps, display a progress bar that allows the user to see how many steps remain till payment process so that they are excited to receive their purchase.
• Providers should offer different ways to pay instead of just debit or credit cards.

Conclusions

There are many ways to create great mobile shopping experience. The 5 tips above may seem simple, but they can generate such a big impact on your online sales. In short, provide a simple, easy, and seamless experience for users and give shoppers an experience they won’t forget!

Do you have any tips of your own on how to improve mobile shopping experience?

References:

1. Practical E-Commerce: E-commerce Design Trends
2. Web Designer Depot: 4 Simple Ways to Perfect the UX of Mobile E-Commerce
3. E-Consultancy: 6 Thoughts on Google’s Mobile-Friendly Search Announcement
4. Kissmetrics: Surprising Mobile E-Commerce
5. Shopify: Mobile Now Accounts for 50.3% of All E-Commerce Traffic
6. MyCustomer: Mobile Commerce’s Nine Ways to Improve Your Customer Experience
7. Shopify: Creative Ways to Improve E-Commerce Customer Experience
8. Lemonstand: 9 Expert Tips on Designing Better Mobile E-Commerce Experience
9. 3Q Digital: 3 Simple Steps to Improve E-Commerce Experience 2015

The post Improving Mobile Users’ Shopping Experience appeared first on Stampede: the strategic design & technology company.

Simple pleasures

Whenever I mention that I am living in Arau, the common response/ question would be, “What do you actually have over there?”

True, we might not have big and airy shopping malls like most city folks do – the only shopping mall we have is C-Mart, which might be close to a bigger version of a convenience store rather than a mall. As unassuming as C-Mart is, and although it is not as popular as Jusco or Tesco, I get my weekly supply of Subway sandwiches here as well as getting my favourite corn in a cup. The groceries are not as pricey as they are in the city. There’s also my favourite shop in front of C-Mart called “Borong Dinh”  where I can get cheap household things. You can get 6 pieces cloth hangers for only MYR2 here.

Simple pleasures like these delight me. The most important thing is, the cost of living here is low hence a lot more affordable than living in the city.

Eating out

There are days when I don’t feel like cooking, but it is good to know that even in Arau I would have never run out of choices to dine outside, which includes both local and fusion restaurants.

For lunch, there is a small restaurant near the Chinese school where you can get a huge variety of local dishes. My favourite dish is called crispy fried mushrooms. It’s something  I would never fail to order every time I go there.

As for dinner, there is a small food court beside the Shell petrol station. There you can get “moi sup”  (rice porridge with soup) and chicken chop. And whenever I feel like I want to have proper western food, I’d go to Blackwood Cafe located inside C-Mart.

 Location, location

According to history, while Perlis was still under Kedah colony, Arau was administered by a dignitary who was known as Dato’ Tok Arau which had a royal lineage. Therefore Arau was named after his esteemed services in building the town. There is not much sources about him online, therefore most of the stories were pretty much derived from the residents of the town as well as historians who are interested in the town.

The royal town of Arau is located 14 kilometers southeast of the official state capital of Kangar. In Malaysia, royal cities are the second most important city after the capital cities and are often referred to as the residence of the Sultan and King states in Malaysia. King of Perlis, who is Tuanku Syed Sirajuddin, lives here. He was the Yang di-Pertuan Agong of Malaysia from 2001 to 2006. Tuanku Syed Faizuddin Putra was the Regent of Perlis during the five-year period when Tuanku Syed Sirajuddin was Yang di-Pertuan Agong.

Arau, like the other states of Malaysia, is full of nation’s history and heritage that is always open to be explored by the younger generation. There are Royal Palace, Royal Tombs, Royal Gallery and Royal Mosque. The Royal Mosque or also known as the State Mosque can easily accommodate roughly 7,000 people in one prayer session.

Arau is also known as the education city of the northern region because of several universities here. Amongst the universities we have in Arau at the moment are Universiti Teknologi Mara (UITM), Universiti Malaysia Perlis (UniMAP), Kolej Komuniti Arau, Politeknik Tuanku Syed Sirajuddin and Kolej Matrikulasi Perlis.

Pasar Nat

There is also a famous morning market endearingly dubbed as “Nat Pokok Getah”. “Nat” means market for Northern people, and “pokok getah” stands for the rubber trees. The existence of this market in rubber plantation area of about two hectares in Pauh here is absolutely unique and sometimes could attract thousands of people to shop there, despite the scorching weather. The market is roofed naturally with the rubber trees, providing a natural and cosy shopping experience.

Every Friday and Sunday, the market, comfortable under the shades of rubber plantation will be filled with people shopping various kitchen essentials, clothing, food, fruits, and agriculture products. This market had been operating since 1998 between the hours of 7 am and 12 noon involving 300 dealers.

This market, definitely, is one of my favourite things here in Arau.

The glorious paddy fields

One of the nicest things here in Arau is that we often have a stretch of paddy fields, offering such a nice view and interesting rural scenery. Sometimes I would go around to explore the shortcuts through the paddy fields. It is also quite adventurous if you are driving. The roads around the paddy fields are narrow and unstable (due to its swampy nature) and sometimes would just enough to fit one car.

Paddy planting and harvesting are amongst the main sources of income for the locals here. It’s a nice view when the paddy is ripe – all yellow and bright.

Getting around

The traffic here is perpetually clear. Everybody was probably Italians in their earlier life, taking delight in dolce far nientes – the pleasure of doing nothing. Everyone takes it slow and easy, not much rush. The mood is different here from the city.

There is no airport in this tiny state, so there is no direct flight here let alone Perlis. The closest airport is Sultan Abdul Halim Airport in Alor Star, Kedah. Arau is the stop point for visitors travelling by train from Kuala Lumpur to Langkawi. From Arau, taxis are available to Kuala Perlis, where the ferry terminal to Langkawi is located.

People

I love the fact that people here are really friendly and still embody the “kampung spirit” – where the community bonding is really close and everyone knows and takes care of each other. Me and my neighbours often organise a lot of gatherings and among the best things is when we do communal cooking. They might be just simple dishes, but they taste just amazing as we eat them together over kopi O (hot black coffee) and chat over things.

These are things you simply cannot experience it in the hustle bustle of the city.

Would you like to pay a visit to my town one day?

(Image Credits: Train station, C-Mart, paddy fields, nat market)

The post A City of Our Own VII: Arau appeared first on Stampede: the strategic design & technology company.

In an e-commerce store, at times the design gets in the way of the product. It overwhelms user. A good design blends in the background, almost unnoticeable even. The question is, how do we keep a product display page clean and minimal with so many things vying for user’s attention?

Here are 8 excellent examples of how you could do it.

More Rare

More Rare is an online store operated by graphic designer Rieko Vining selling rare and antique vintage products from Japan. Rieko created a crispy clean site with tan-coloured background, a theme synonymous with antiquity, that displays products in a beautiful grid.

It is so minimal that you won’t see any any description until you mouse-over an item. It captures a visit to a small vintage shop, where you let the charm of a product pulls you in before learning more about their story.

AIAIAI

Headquartered in Copenhagen, AIAIAI is an audio design company producing modern, minimalist headphones and earphones deliver clear, amplified sound. True to being Denmark’s leader in acoustic design and engineering. their online store retains the neat, grid-based layout, relying only on whitespace to distinguish one product cell from another.

Much of the space is taken by product shots compared to the minimal footprints of product name and price. User can immediately switch between available colours simply by hovering their mouse too. This is a great option considering that most e-commerce only serves this interaction at the product card level.

Lush

Lush is a company making fresh handmade cosmetics, headquartered in the United Kingdom. The brand uses wholely natural ingredients in their products and is an active advocate against animal testing. Lush’s products have an exclusive feel to them, almost as if every product is prepared delicately to order and sent directly to your bathroom from Lush’s famed Kitchen.

The category display is immersive. Product placements follow a form of masonry grid — named after mason fitting stones in a wall — and are scattered among different themes like News and Features. The result is not severely minimal but still maintains a clean yet whimsically cluttered look. The contrast between the busy theme and sparse product details works too. Users can easily differentiate the two and by being quieter than the busy theme, a product actually shines better.

Artiitii

Artiitii is an online store selling unique limited edition prints dedicated to the greatest artists in the world. Run by two childhood friends passionate about the beauty of combining music, art and design, Artiitii wants to bring something unique into a world of mass production. Each of Artiitii’s product is limited to 50 prints each, all carefully hand drawn.

The prints are all in rectangular shape for easy framing but displayed in rounded avatar style — a very effective style useful to humanizing Internet content. Because each print is a labour of love and limited to 50, Artiitii includes the number of prints sold under every product. It gives a sense of urgency to fans and provides a motivation strong enough to complete the purchase before it goes out of print.

Anyi Lu

Anyi Lu is another website that relies heavily on good product photography to hint users that more information is available by interacting with each product. They do take it up a notch through depth perception in every product shot. The grid is varied between 3 and 2 columns, with generous room to breathe, reminding us of those luxuriously sparse shelf space in high-end stores.

As user hovers their mouse on a shoe, something interesting happens. The product will blur and recedes to the background a little to bring forth its name and price. It’s all done very stylishly though the effect is somewhat laggy for the first few tries.

HeyShop

An online store from Barcelona, HeyShop is the storefront forHey Studio, where they display and sell personal projects like posters and books. Hey is a small studio so the posters will be made on demand using digital printing and high quality paper. Similar to Artiitii, this print-on-demand service differentiates their products from other mass-produced items.

Products are displayed with minimal description but in different format, based on types. Books are placed in shelves, bags hanged and prints framed on the wall. Despite the different display modes, they all in the end feel like a unified gallery and it serves the Hey brand beautifully.

Interacting with specific product will bring about a simple black panel, completely obscuring the image with product name, dimension (for prints), price as well as a link to view more info. What could be more amazing is if these items could do a little flip and show all information at the back of their frame, wall or book cover. It’s definitely a not a major feat with CSS3 nowadays.

Hard Graft

Founded in 2007 by designers monie.ka and James Teal, Hard Graft produces upscale lifestyle accessories using premium leather and good old-fashioned workmanship. The brand carries beautifully crafted leather bags, iPhone/iPad cases and many more, using rich, premium and highly resourceful materials. Product shots absolutely takes center stage here, with oversized images showing the tiniest leather detailings. In deliberate contrast, product name and price are shown in tiny font sizes with the occasional sticker-style label informing user that an item is specific to a certain smartphone model.

What’s interesting is how photography of the products at times breaks the grid by showing two products hanging from a horizontal bar spanning the entire page, effectively disrupting the dual-column scrolling. The result? The break serves as a resting point for your eyes and you tend to linger more to appreciate the exquisite craftmanship. Nicely done.

Patrik Ervell

The last in our list is quite a unique website. Patrik Ervell is an American-born menswear designer based in New York City. His designs are characterized as utilitarian, minimal and elegant and it translates beautifully into his online shopping experience. The category page is minimally done with hardly any stray elements present. No other information is provided besides product name so user will need to click to view full details on the product page.

When you first land on the website, the models will start moving in several directions to show users see how each outfit looks like from front and side. It’s almost like a watching a runway show and far more convincing than a 360-degree static product display. Being able to see real-life fitting of garments is something online customers will truly appreciate.

Conclusion

As shown in the examples above, e-commerce product display can take many forms. Some industries like the vitamins & supplement rarely ventures outside their utilitarian design as it serves their purpose to provide as much information as possible for consumer comparison.

In others like fashion and lifestyle industry, you will notice more variations in getting the message across. Attractive product placements and beautiful photography truly are deciding factors whether your casual visitor will remain as one or becomes an active follower of your brand.

The post 8 Clean and Minimal Ways to Display E-Commerce Products appeared first on Stampede: the strategic design & technology company.

Design is a funny word. Some people think design means how it looks. But of course, if you dig deeper, it’s really how it works.
– Steve Jobs

The requirements

These are the requirements given by Shaza, my Creative Lead in order to build the app:

• The note-taking app will have two options, a blank note or a to-do list.
• It will have titles and content but no text formatting except URLs will be automatically converted to links by the app.
• Every note will be clearly separated and can be archived or deleted.
• There will be a search function and user will be able to email the note to anyone.

She would assume the role of the client who is going to determine and evaluate whether this project is a success (or not, hopefully that will not happen).

Stage 1: Brainstorming

The next step was to merge all these bits and pieces of requirements and put them together into one concept of a user interface.

I started out by doing a research on the existing note-taking apps in my phone and in the Apple App Store. Since I am using iPhone 4S at the moment, I am using the native note-taking app as a benchmark, combining it with the functions of other note-taking apps which work well in my experience – for example, Evernote.

Once I have figured out which features might work well in my app, I started sketching up wireframes and flows by hand. I found that it actually eases my mind a lot, this whole sketching with hand thing. There are no lags on the computer, or to worry about how the weight of the stroke after using a digital pen is not clear, light or heavy enough. Sketching gives me more control of my creative process.

At the same time, I have had many discussions about the contents and the progress of the app design with Shaza.

Through flowchart and wireframes, I finally was able to get a clearer picture on how to start designing it.

Stage 2: Design

It’s good to come up with a brand to be able to decide the concept for the app. With this in mind, I started to look for a name for the app. I wanted something catchy but yet simple and easy to remember – something like Basecamp or  Teux Deux.

So I came out with “Goat Note”, which rhymes with “got note?”.

Satisfied with my app name, it is easier for me to decide on the colour scheme and app design.

Once all of these important decisions were made, it was time to detail everything visually. I spent hours in Photoshop drawing out all the necessary elements for the app.

When opening the app, the logo will appear on its own first with greyish brown blurred image as background.

After loading for about 3 seconds, the login page will appear. New users will be able to sign in via Facebook account, Twitter account or sign up using email. This gives them users the flexibility to sign using any of these accounts of their choice.

• The app dashboard will have separated list on notes and to-do list. Setting icon and search bar are placed at the top, followed by “Create a new note” option.
• Notes and to-do list will be displayed up to 3 latest list and if the user wants to view more they can do by clicking on the “View all 10 notes”. The number will change depends on how many list the users have.
• To view option for “Edit, Email, Unlock and Delete” function, users will have to swipe to the left on the desired list.

A modal will appear for unlocking/locking function.

Users can also delete, email and create new note or to-do list here.

A modal will appear in case a user wants to create new note.

Learning Experience

In the final process of the design, I was also required to present the app to the whole team.

As a designer, nothing is ever complete to me. Although I have worked so hard in making sure the app is in its best shape, the app is still imperfect and requires a number of improvements. Hence, pre-presentation jitters. Thank goodness the team is always ever supportive of me – giving a stream of ideas after ideas for my Goat Note app.

The processes of putting together the entire requirements, and at the same time making it beautiful, desirable, up-to-date and engaging were all new to me and very exciting. I learned that to be able to design an app that really work for and resonates with users, you will need to place yourself in the users’ shoes instead of your own (as a designer) and be a technological enthusiast.

Result? I was soon revealed that this assignment’s goal was not to measure whether I succeed or not, but rather, for me and for the rest of the team to understand the processes it take to design an app, or design anything for that matter – from research to brainstorming to sketching through a number of reiterations. It is always a fun process in the end.

Will I want to design another app? Yes why not!

The post Building a Mobile Note-Taking App appeared first on Stampede: the strategic design & technology company.

Like many other artisans, web designers prefer to work within the boundaries of rules – either intuitively or by following a standard practice (e.g. grid structure). While freedom might be good, designing within limitations is a way for designers to know how far the uniformity can be achieved for their designs.

Gestalt is a German word which stands for “essence or shape of an entity’s complete form”. Possibly the most significant and the most powerful principle used in arts and design, the idea of the “gestalt” is a fairly old one to be traced back.

In the midst of designing, there are principles that were uncovered that have indirectly influenced designers in the process of their creating. One way to help designing content-based design is to refer to The Gestalt Principle of Design and to understand why it is essential to know how gestaltism influences our content design.

Later in the article, we shall be presenting a revelation that online readers, in a nutshell, do not read (gasp!), why they don’t, and how can we use that to our advantage in designing a content-based website.
yeah.

Part 1: The Gestalt Design Principle

Gestalt is a German word which stands for “essence or shape of an entity’s complete form”. Possibly the most significant and the most powerful principle used in arts and design, the idea of the “gestalt” is a fairly old one to be traced back. The principle originated from early 20th century philosopher Christian von Ehrenfels along with his contemporary partner, psychiatrist Max Wertheimer, among others.

Simply stating that the whole is greater than its parts, the Gestalt design principle is meant to describe how the mind organises visual data and how best we should design in order to achieve the best effect.

Example of Gestalt design principles in use: Raphael’s School of Athens incorporating a clear sense of figure-ground

In the world of web design, this principle helps to take the guesswork out of design. While many experienced designers are able to design well by eye, untrained designers may find themselves lost and only being left with the design samples found on the web, perusing the same layouts over and over again. This is where understanding Gestalt design principle will be useful in designing content-based websites.

The 5 principles in Gestalt

• Proximity, Uniform Connectedness and Good Continuation
• Similarity
• Prägnanz (Figure-Ground)
• Common Fate
• Closure

Proximity, Uniform Connectedness and Good Continuation

Consider this: why are you still reading? Aside from the fact that somebody recommended you this article or you landed here somewhere while searching about the theory of Gestalt, it is also due to the fact that this article was properly articulated, grouped and structured.

Bragging aside, this is also contributed by the principles of proximity, uniform connectedness and good continuation. To easily define them, the concept underlying these principles is grouping. When we have a group of objects, we tend to see them as forming coherent groups and we decide whether they would make sense or not.

Proximity: When elements are positioned close to one another, they are seen as part of a group rather than as individual elements.

Uniform connectedness: We understand the same coloured elements bounded within the box are seen to be more related than the rest.

Easier to Digest: In good continuation, the graph on the right is easier to digest since it suggest a continuous data organisation rather than the one on the left.

In web design, one example of employing these principles is with navigational links, where not only do we keep the navigation links together, but also group them internally, putting links to similar pages together, categorising them into sub-categories, and so on.

Another example is in web forms. In this web form from Yahoo!, notice how the form is grouped into three segments: personal information, ID generation, and alternate ID provision.

One way to employ these principles is also by designing by grid. A grid is not only useful as a guideline in bringing order to a layout, but it also is useful in indicating context and the hierarchy of the content of the website. Hence these three principles are safely preserved.

Similarity

We often group things perceptually when we see elements which appear similar to one another. As a designer, the ability to be familiar with all the ways similar things can be seen will help us to choose the right similarity element to exploit. This is because, according to Andy Rutledge, “the different modes of similarity are not created equal. Some are strongly communicative while others are comparatively weak.”

Similarity vs Dissimilarity: Red circles are seen as related to the other red circles and black circles to black circles due to the similarity in color. Red and black circles are seen as dissimilar to each other even though they’re all circles.

By employing the principle of similarity, it could help web designers to provide visual cues as to which elements are similar to one another. Hence, through this relation, viewers or end users will be able to perceive the organisation and interact with the elements accordingly.

One way to use the principle of similarity is through links. Links needs to be distinguished from other text elements and yet, since they also belong to the same group (links) they have to also be similar to one another of their kind. By styling the colour of the links to be different from the overall copy, we can establish this similarity.

Another way to employ similarity is with organisation of page content and elements. Notice how the homepage content in Monocle.com is grouped together by the means of bounding boxes to indicate that they are are references (links) to articles, as well as the usage of different, simple icons to indicate the type of media and topics in those particular articles.

Prägnanz (Figure-Ground)

We bet you do remember during the time when Geocities first made an appearance into the world wide web, incorporating the busy tiled graphics in the background. That was until we learned it was not ideal anymore because this means the background took away the foreground objects. Basic design: Foreground objects should be more prominent than their backgrounds.

Figure-ground refers to the relationship between positive elements and negative space. Employing the principle of figure-ground ensures so that viewers will be able to direct their gaze on elements that should be more prioritised. Again, with organisation, it will also allow viewers to to see how these elements relate to one another.

Figure-Ground: The eye will separate whole figures from their background in order to understand what’s being seen.

In the context of a web design, employing figure-ground principle shall help us to design a site where the viewers will be able to distinguish content from structure as well as understanding the importance or implications of this implied depth. This can established by utilising many visual mechanisms and styling treatments.

If you take a look at Maine.gov‘s website, the homepage is presented in a number of graphics, textures, colors, and shapes. However, due to the certain treatments of different elements (e.g. the background photo is made blurry) viewers are able to distinguish which ones are the content (figure) and which ones are the structure and background (ground).

Common Fate

The idea of common fate is relatively simple: We perceive items or objects moving (or appearing to move) in the same direction as related to each other, more so than elements that are stationary or appear to be moving in different directions. Those related items are sharing a common fate.

In this photo, we could perceive that the stream on the left is heading towards the viewer whilst the one on the right is heading away from the viewer. These different streams share common fate (s) – one coming towards, and another going away. Although static, the movement is clearly implied and relationships are easily formed. In design, elements that move with one another relate to one another, while elements that resist that common movement or move in a different direction, do not relate.

One example is by taking a look at the dropdown menu in Lismore City Council‘s mobile website. This main menu item has a slide-out sub-menu, so do the others. Hence these two items are related in our minds.

Closure

The closure principle is really about drawing conclusions. It involves seeing patterns and filling in the details by yourselves, combining parts to form a simpler whole.

The old IBM logo is a great example of illustrating the principle of closure.

IBM: You can recognise there is a letter I, B and M within the bright blue horizontal lines arranged to create the perception of these letters.

Closure: Do you see a white triangle amidst the three black Pac-Man-like shapes? Do you see a panda amidst the several random shapes?

More so than a visual outcome, closure helps to also instil storytelling in a design. The key to closure is to provide enough information so the eye can fill in the rest. If too much is missing, the elements will be seen as separate parts instead of a whole. If too much information is provided, there’s no need for closure to occur.

Part 2: People Scan, Not Read?

The way users read on the Web is different from the way they read printed pages. People rarely read word-by-word on the Web. Internet users scan a page until they find something of interest, and then they read.

The truth is people are going to skim and scan all of these content we have written on this blog post, looking for something (a keyword, a header or subhead) that catches their attention or matches the reason they’re visiting your website in the first place.

As designers and web developers, we do also understand that the Web is vast and competition is rough. Each page has to compete with hundreds of millions of other pages for user’s attention.

Another fact is that reading from computer screens is tiring for the eyes – the brightness, the many other distractions around it (social media, emails, etc.). According to Jakob Nielsen, User Advocate and principal of the Nielsen Norman Group on how users read on the Web, reading on computer screens takes 25 percent slower than reading from paper.

By now, we should be thanking you for still reading up to this point. Or are you?

Web users also have very short attention spans, they always feel like they want to consume something short and concise on the go. On top of this, the hectic modern life also contributed to the rushing. This is why people attempt to minimise the number of words they read and in as much time as possible.

As designers and web developers, we do also understand that the Web is vast and competition is rough. Each page has to compete with hundreds of millions of other pages for user’s attention.Instead of spending a lot of time on a single page, users move between many pages and try to pick the most easily digestible for their own good.

And here’s where we should utilise this sort of information to concoct a well-designed content-based site.

Some Numbers Proving That People Scan, Not Read

Various studies have been conducted to find out that people actually scan instead of reading. Here are some of them:

• According to Steve Krug in his well-received first book, Don’t Make Me Think, one of the most important fact about web users is that they don’t read, they scan.
• In his seminal web usability study from 1997, Jakob Nielsen showed that 79% of web users scan rather than read.
• Nielsen found by analysing the data in the study was that although people spend more time on pages with more words and more information, they only spend 4.4 seconds more for each additional 100 words. By calculating reading rates, he concluded that when the sentence is excessively long, people will only read 18% of it.
• Nielsen also has determined that the truth is that people don’t read very much. His recent eye tracking studies shows that less than 20% of the text content is actually read on an average Web page.
• In a usability study by Gerry McGovern, he discovered that only 1 out of 15 users could locate a specific piece of information that was not scannably placed on the page.
• In 2013, analytics vendor Chartbeat analyzed Slate and other websites and found that most visitors scroll through about only 50-60% of an article page. What’s even more interesting is that, people readily share your articles even without reading them – which proves that  it seems to be no correlation between sharing and scrolling.

Scrolling Majority: Most visitors scroll through about only 50-60% of an article page on the Web.

Part 3: Users’ Scanning Patterns

There are several layout patterns to suggest how people scan or read through a design. Each of these diagrams do primarily one similar thing: offering advice of where to place important information. Here are some of them.

Rule of Thirds

In a related compositional practice, the “rule of thirds” places centres of interest within a grid that divides both dimensions in thirds. These compositional rules are purely pictorial, however, and are probably most useful for displays or home pages composed almost entirely of graphics or photography. Most page composition is dominated by text, and there our reading habits are the primary forces that shape the way we scan pages.

Good example of rule of thirds

• No element gets ignored or overlooked because the elements all touch the intersecting lines of the grid. The elements are all arranged and positioned in a way that makes it easy for users to capture the beauty of the product in a full single view.
• Four intersections of the lines contain exactly the information which the company wants its users to see — namely what the site is all about and an example of their work.

Bad example of rule of thirds

• Elements are not proportionally aligned with the rule of third.
• It would make it difficult for users to look at, and force them to move their eyes around the page to view each element.

The Gutenberg Diagram

The Gutenberg Diagram, a concept popularised by newspaper designer Edmund C. Arnold dictates a display which is divided into four equal areas. These areas can help designers ensure that they are taking full advantage of a user’s reading gravity, the natural path that most peoples’ eyes will follow when being presented with information.

Primary optical area

The higher left portion of the page is the primary focus of every user, it’s where the eyes will automatically focus regardless if the user is searching for something, wanting to read or just doing a quick scan on the page.

Strong fallow area

The second stage of the reading habit is moving to the higher right portion of the page, you can think of it as a follow up from the left portion but less important. It’s not a good idea to break the reader’s experience created from the starting point. This means that if you have a call to action the user will stop at this point and act.

Weak fallow area

The lower left portion is the blind portion of the Gutenberg Diagram. Although this area is readable, users tend to not give much importance to the content in this area of the page.

Terminal area

When the user reaches the lower right portion of the page there is a break in the reading or “page scan” process and the user will need to take an action. This is the perfect spot to insert call-to-action such as buttons, links, forms, video, etc.

Good example of rule of The Gutenberg diagram

• The call to actions falls on the strong fallow & terminal areas, where these are the menus.

Bad example of rule of The Gutenberg diagram

• The call to action (the link) falls on the weak fallow area.

F-Shape Pattern

In F-shape pattern, it follows the principle that reading is largely done the same way that a book is read: top to bottom, left to right. Sidebar content is often dismissed below the “fold”, and usually is only scanned briefly. The bulk of the attention stays within the main content column.

Good example of F-shape pattern

• Most important information are structured at the top line F pattern
• Content is arranged by employing the F-pattern scanning behaviour
• Gives you an idea of the whole information of the website at the top of the “F”, getting you involved before you even start scrolling.

Bad example of F-shape pattern

• By using the big image as the header and much smaller font for the menus, the most important information seems dim in this website.

Zig-Zag Pattern

Naturally in Western languages, we would read from top to bottom, scanning left to right down the page in a “Gutenberg z” pattern. Using this pattern, we can extend this  a little by seeing it more as a series of z-movements instead of one big z-movement.

This series of z-movements is sometimes referred to as a zig-zag pattern. If we continue to add more zigs and zags to the pattern we ultimately end up with a series of near horizontal right and left movements as the diagonal portion of the z gets shallower and shallower.

Good example of zig-zag pattern

• Eyes could easily scan the content page from left to right (Z movements) till the bottom.
• Placing important elements aligning to the end points of a ‘zig-zag’ guarantees that your visitors remember more details after they skim.

Bad example of zig-zag pattern

• Contents are all over the place and not adhering to the zig-zag pattern.

Part 4: Examples of Good Content-Based Designs

Monocle.com

Monocle.com is a global affairs and lifestyle magazine, 24-hour radio station, website, and media brand founded by Tyler Brûlé, a Canadian entrepreneur, Financial Times columnist, and previously founder of Wallpaper* magazine. While news and content-focused websites are the trickiest to tackle in design and typography, Monocle.com has done it pretty well.

• The stories are arranged collage-style, in colour codes and icons adhering to the grouping based on the principle of Gestalt.
• The website also employs sufficient usage of different types of font, icons and colours to aid navigations without being too blinding, while at the same time, being bold and experimental.
• In challenge of not looking cluttered, Monocle.com has implemented a subtle background colour to enhance the foreground content.
• Expresses the mood and the branding of the magazine real well in supporting diversity globally.

The Future of Airlines Websites

This website is a continuation of a video published by Fantasy Interactive (Fi), a digital design agency. Fi has come up with a concept design of an airline site of the future after a thorough study of all the major airline websites for their information architecture, including their visual and interaction design. It is apt that this website is targeting within the realm of user experience because it is very nicely done.

• Information are arranged in smaller chunks for easy browsing and scrolling, with a very well-structured content hierarchy.
• Minimal usage of various fonts.
• Interactive information in order to provide better understanding of how airlines websites work now vs the future.
• Easy-to-understand diagrams, with animations.
• Highly visual.

The Digital-Physical

Craig Mod wrote The Digital Physical recounting his experience in the development of the Flipboard App for iPhone. As with any large-scale projects, nights that seem to be endless – he thought, just how much does a digital project weigh? So he decided to explore the tangibility of a digital project in relation to its physical shape. Mod’s essay is beautifully written as well as nicely designed.

• As a guide for the lengthy article, there is an index on the right side of the site. However, if it would scroll along with the content, it would be much better.
• The accommodating visuals are there to help enhance the reading experience without being too overwhelming.
• Clear indication of citations that will lead to the reference articles at the bottom of the page.
• Mimicking magazine articles, there were also important excerpts placed within the articles as pull quotes.
• Short paragraphs for easy reading and digesting.

Mapping Place Pins

Pinterest recently launched Place Pins, where content can be saved with a location and then laid out on a map. This new feature is aimed to help users plan trips and create guides to their hometowns, in addition to what some users had been doing all this while. Mapping Place Pins is a case study behind the design process of building this feature.

• Information is arranged in a systematic hierarchy and in smaller chunks to add reading and scrolling – introduction, meet the team, the idea, and the journey and design process.
• Huge and appropriate header image to attract attention.
• Accommodating visual featuring sketches, prototypes and behind-the-scene photos take viewers along on the process.
• The choice of font and font size could be improved in some parts.

The Great Discontent

The Great Discontent (TGD) is a magazine featuring interviews on beginnings, creativity, and risk. Cofounded by Ryan & Tina Essmaker, TGD launched online in August 2011 and has grown to include a print counterpart, a short film series, and other content-related projects and collaborations.

• Easily the best-designed content-based website out there, TGD articles feature big header image of the interviewee to grab the attention.
• Questions and answers are structured to seem to flow as in normal conversations, as if you are in the same room participating in the interview.
• Pull quotes to highlight the best parts of the articles.
• Accommodating visuals revolving around the interviewee, their passions and their work.
• Navigational hints are everywhere without being too much in the face.

GO Italian Street Food

Based in London, GO is a franchise of Italian street food. Its nicely designed website adds to the delight that their food is freshly made every day by their wonderful staff.

• Big, strong headline directing you to the information.
• Information are arranged in tiles for easy access. The ones in colour act as menus.
• Quirky images and illustration to fit the branding of the joint.
• Highlighted keywords for content which matter most e.g. “Contact us to discover more.”

Los Angeles Times

The leading source of news on Southern California published in 1881, Los Angeles Times offers daily news on entertainment, movies, television, music, politics, business, health, technology, travel and many more.

• Offers an optimum use of whitespace enough to take the clutter away.
• Grouping of menus in Visual Browse to follow the Gestalt principle of common fate.
• Colour codes to show the hierarchy of the menu as well as indicating information that needs to stand out than the rest.
• Bigger header and image to indicate featured articles.

Made by Fibb

Made by Fibb is a team of a Bernd Baumgartner, Austrian-based designer and Fabian Irsara, Italian-born developer. While this site is not largely content-based and is only built by two people, it just emits their fun personality.

• Information and navigation are arranged in colour-codes.
• Interactivity – viewers are able to submit their own photos by taking their own pictures within the in-built camera option.
• Hamburger icon on the right to be able to filter the sort of information viewers only want to see on the site.
• Nifty little icon to indicate viewers that they are always able to return to top of the page after scrolling.

National Climate Assessment

The National Climate Assessment is a report summarising the impacts of climate change on the United States, for recent and in the future. Produced by a team of more than 300 experts, the report was extensively reviewed by the public and experts, including federal agencies and a panel of the National Academy of Sciences.

The challenge here is to make a number of seemingly tedious environment reports as interesting as possible, and the site does not fail.

• Two options to view the report: by highlights or full report offering the option for quick viewing or in detailed reading for viewers.
• Information is structured and arranged by importance of the report.
• Appropriate icons to indicate different sections of the report: climates, regions, sectors and many more.
• Bullets as indicators on the right side of the website to indicate the progress of the report as viewers read online.
• Second means of navigation is made easy by having the hamburger icon leading to a lightbox upon clicking to offer full sitemap.

Teehan+Lax case study on Prismatic

Teehan+Lax is a Toronto-based digital creative agency. They are the people behind  the well-known blogging platform Medium and online reading platform Readability. If there’s one agency that would know about the best online reading experience, it has to be Teehan+Lax.

• Big headline to catch attention on first sight.
• Like many other good content-based websites mentioned here, information is very well structured with a few pull-quotes in as a way to keep the interest in reading going.
• Attractive, sometimes interactive visuals to complement the article.

Conclusions

Based on the principles of Gestalt, there are several questions that you can ask yourself before or in the middle of designing. As none of these principles stands alone and all of them function in totality with one another, it is important to check that every principle is fulfilled. As Clay Shirky puts it, “you cannot understand all of the properties of water from studying its constituent atoms in isolation.”

• Are you grouping your design elements correctly? (proximity)
• What elements of your designs are you unintentionally over- or under-emphasising? (similarity)
• How is the relationship between the positive and negative space in your design? (figure-ground)
• Are there design elements in your work that fight instead of flow together? (common fate)
• Are there any patterns that you have employed so that viewers will be able to fill and see the whole picture by themselves? (closure)

Based on the users’ content-scanning pattern, here’s how we can use them to our advantage as designers:

• Make important information stand out. Most readers will not read every single word on your website. Identify key areas you want them to focus on. This can be accomplished with the right use of typography. Using bullet points, headings and subheadings will help visitors to quickly identify key elements on your website.
• Put the most important information into those areas to ensure it gets viewed. Top left corner gets the attention first. When users land on your site, their eye path starts from the upper left corner, and moves on from there.
• Use short paragraphs or lists. Using shorter paragraphs or lists to communicate with your visitors will further help to convey your intended message and improve usability.
• Studies have demonstrated over and over again that images get higher levels of attention. Thus utilising relevant imagery for the content of your website can also help to improve its readability and contributes to the overall aesthetics of your website design.

What are other good content-based websites have you come across? Are there any other principles you have adhered in order to design the ideal websites?

Resources and References

The Principles of Gestalt

• Design Principles: Visual Perception And The Principles Of Gestalt
• Gestalt Principles Applied In Design
• Andy Rutledge’s Series of Gestalt Design
• The Gestalt Principle: Design Theory for Web Designers

On Scanning and Reading

• Understanding the F-Layout in Web Design
• Warning: Web Users Do Not Read – They Scan
• Serious reading takes a hit from online scanning and skimming
• You Won’t Finish This Article
• Myth #1: People read on the web
• The Stats Are In: You’re Just Skimming This Article
• Simple Ways to Get More People to Read Your Content
• Website Reading: It (Sometimes) Does Happen

On Scanning Patterns

• Presenting Information Architecture
• Understanding the Z-Layout in Web Design
• 3 Design Layouts
• Applying Divine Proportion To Your Web Designs
• Web Design & The Rule of Thirds
• Understanding the Split Layout in Web Design
• F or Z Pattern In Web Design?
• The Gutenberg Diagram in Web Design
• The Gutenberg Diagram in Design

General

• 66 Fantastic Grid Based Design Layouts
• Well-Designed Government Agency Websites
• Designing with Psychology in Mind

The post People Don’t Read, They Scan appeared first on Stampede: the strategic design & technology company.

On working remotely

Many people might think that it would be easy working from home – that you can lounge around where pants are optional and you can just work any time you want.

Little did they know that, remote working requires a lot of discipline. It’s all about managing yourself to work in a non-traditional office enviroment; no superior to physically guide you, no colleague to hover around your cubicle to chat around and have some water cooler talks. Like every other job, remote working requires trust and responsibility from both the employer and employee to work. There is the challenge, on top of my dream to be a brilliant designer.

Only upon a few days joining Stampede, it felt like a breeze. Not only that Stampede has a system to make sure that everyone could work remotely very easily and comfortably while keeping to the deadlines, even the water cooler chats over Skype made me feel like we all sit in one physical office throwing banters over one another.

Stampede’s working environment evolve around Skype, Basecamp, Toggl, Invision, Bonus.ly and other amazing apps that help the team with the daily task. The team work remotely within miles away including (but not limited to, I know some move around a lot) Langkawi, Kedah, Ipoh, Kuala Lumpur and Perlis with only Skype and a Whatsapp group connecting us. Whilst technology has done such a great job as the medium, once again it is all about trust, responsibility and dedication from each team member to make this all work.

On design

While I had been designing from the start, I came from from advertising and print design industry for a couple of years before. Suffice to say website design and development is something I had been out of touch with for a long time. My knowledge on web development technology is way outdated. Thankfully, everyone at Stampede, especially Shaza my direct mentor, has been really helpful in training me on top of enhancing my knowledge and skills in designing.

From design trainings conducted by Shaza, I am currently learning some the new design techniques as well as keeping up with the latest web design trend. Shaza also teaches me new things on better understanding website design from font
for websites, font icons, typography, whitespaces, the do & don’ts in website design and many more.

I was also given the responsibility to post daily on Stampede Curated. The task is a good practice for me to spot on good design and gain more knowledge from the design itself. By observation, it could inspire me to design by learning through other people’s design. The task also keeps me on the latest design trend as it rapidly evolves from time to time.

While working with Sani in his training, i learned a lot on website designing development. Among them are basic CSS, grid in designing website, Bootstrap and Javascript. This is when I realised designing website is a team effort. When
you embark on a web design, you have to think on the front end developer’s side too. When you design, you always have to imagine how the others will work with your design, what type of components you should design, what grid you’re
going to use and such. This to ensure the total work process will be done with as less hiccups as possible.

The team

I had the pleasure to meet and to get to know everyone for the first time last week over our picnic and island vacation. Amidst Shaiful’s smooth ukulele streaming and munching Dov’s brilliant lamb shashlik, we chatted for hours like old friends.

While it may had been only my first two months here, it is almost like I have known everybody for a long time before.
Stampede team members are always up to no good – every conversation is filled with funny remarks and sarcastic retorts of which some we have compiled over in a tumblr called Things Stampede Team Says.

Joining Stampede has been such an amazing experience so far. I look forward for more exciting years to come so I could craft more and more stellar design works for the company.

The post The First Two Months appeared first on Stampede: the strategic design & technology company.