Our Blog

Home Blog

Your Web Page Weight Shouldn’t Let Your User Wait

0

When it comes to surfing websites, a web page size is an essential attribute for the success of your website. The more you minimize the size of a web page file, the quicker the page will load, and the longer your visitor will stay.

Site speed is determined by many factors such as the speed of the internet connection – 3G or 4G bandwidth on mobile phones. When we talk about the elements that define the speed of a website that web developer can control, it mostly relies on the size of the web page and things like images, java script, graphic icons, fonts, and videos.

The Effects of Having an Overweight Web Page

An overweight web page affects your user’s happiness. Google revealed that they use the website speed as a criterion when ranking web pages in search results (SEO).

According to Kissmetrics customer analytics platform, 47% of online users suppose a web page will load in 2 seconds or less. Akamai Technologies, the American content delivery network (CDN), also stated in a study they conducted, that users left web pages when they encountered a delay that went beyond 2 seconds, every extra second of waiting after that resulted in a 7% reduction in conversions.

Financially, an e-commerce website that makes $100,000 per day, will lose $2.5 million yearly for every 1-second page delayed. Overweight web page will starve your business.

The Average Web Page Weight

According to HTTP Archive (httparchive.org), the average web page size in 2016 was 2232 KB.

Our creative lead at Netaq, who designed plenty of websites for renowned establishments such as Honda Middle East, said he does not share the same belief but would not mind implying the same methodology of average page weight that statistics and research suggests.  He also mentioned that page sizes depend on the techniques used when developing and designing a website.

The business needs will determine the creative path of designing a website.

The Techniques of Controlling Web Page Weight

1.     Image Optimization

Reducing page weight can be achieved by using many different techniques, but it is important first to begin optimizing the images since they account for the heaviest elements in a web page size.

Optimizing images can boost site speed. The fewer bytes a web page has to download while displayed, the less pressure you will put on your users’ bandwidth and the faster the browser will render meaningful content.

Find the ideal settings for your image through carefully analyzing it among many dimensions. Format capabilities, content of encoded data, quality, and pixel dimensions. Try to exclude additional image resources, make use of CSS3 effects where possible, implement web fonts rather than encoding text in images and your page will feel light.

2.     Using the Lazy Load Plugin

The lazy Load plugins help in boosting the performance of loading images in long web pages since it works on loading the images that are located in the user’s viewport, while images that are located outside the viewer’s viewport will load only when the user scrolls down. This will lessen the pressure the page size will add to the user’s bandwidth. This effective tool is highly used and recommended on image-heavy websites.

3.      Creating a Black & Weight Version

Another useful technique of reducing a page weight is by creating two versions of the same image you ought to display, the first is black and white images and the other version is a high quality colored one. Depending on how slow the internet connection is, the black and white images will load first till the internet connection gets a little traction and loads up the high colored one.

This technique will allow your user to get to your website faster read the content he seeks faster to provide a better user experience and lower bounce rate.

4.     Eliminate the Unnecessary Extra Weight

After you work on optimizing images, focus on eliminating unneeded scripts or frameworks, choose fonts that will load faster and you will be ready to go.

Anticipatory Design… Making The Decision On Your Behalf

0
Anticipatory design

Sometimes having too many choices will not make our lives easier. The variety of selections will confuse you more because you already have enough options to decide on throughout your day. The same predicament can happen when you browse a website or an app.
Having too many choices can be overwhelming and time-consuming. But that’s where anticipatory design comes in. It provides us choices that are set to help ease our lives a little.

What Is an Anticipatory Design?

An anticipatory design knows what the user wants. Well, almost. It analyzes possible choices based on the user’s previous behavior by accessing data such as browsing history, purchases, search results, and site views, to make decisions and execution easier. It’s a harmonious ecosystem where decisions are made automatically with minimum user input.

Anticipatory design surrounded users a long time ago. Alert boxes, pop-ups, in-app notifications and many other elements that aim to avoid a certain user behavior in the future, or make a certain decision based on past behavior. Microsoft Office’s Clippy is a good example for that. It was there since 1997, and it worked on detecting the user’s intentions and responded with help.

Today’s anticipatory designs use top-notch technology options, such as machine learning algorithms and big data technology, to predict what the user needs based on their past online decisions and behavior.

How It Improves the User Experience

The decision-making process is an overwhelming one when it comes to today’s busy life. If you stream your users with too many options some of them will leave searching for other less stressful alternatives, and the ones who stay will not be satisfied with the overall experience.

Anticipatory design reduces the cost of choice, simplifies the user interface and provides them with less distractive and conjectural online experiences to save their time and effort for other more important tasks, instead of repeating to do ordinary tasks again and again.

Google Now, for example, allows you to “focus on what matters” by solving issues before you even have to think about them. If there’s a restaurant reservation in your calendar, Google Now suggests travel time and great photo spots to enrich your experience.

How It Blossoms Businesses

Simplifying your users’ decision-making process with anticipatory design will help them make faster decisions and have a pleasant user experience that is directed based on what they want from you and will let them come for more.

Well-known companies such as Netflix and Amazon use this type of design. For example, when you go on Netflix it will suggest content for you based on what you have viewed earlier, on your watching habits, and the ratings you gave to the content you already watched. In this way, they will minimize choice range and direct the user attention, in addition to giving the user new opportunities to make choices by presenting new content.

This is how these firms direct their users to continue watching and shopping. They gather data, narrow choices, direct them, and make more money out of the anticipatory design elements.

Outsourcing Decision Making for Our Own Benefit

Anticipatory design is a form of an exchange of benefits. For users, it makes their lives more convenient by putting cutting-edge digital solutions at their service to allow them to dedicate more time for more important tasks rather than overwhelming us with the decision-making process. For businesses, it brings more profits by providing the user with a delightful and intuitive experience, directing them towards what suits them among your products and services for an easier, faster, amusing decision-making process that will let them come back for more.

User Experience: You Don’t Design it, You Design for It

0
You Cant Design UX

The user experience term has become a fad many people use incorrectly today. Designers are having unrealistic expectations about how they can form it, forgetting that it doesn’t only rely on the design, but other aspects also.

It’s noticeable that when showcasing UX work, some digital solutions companies show their work by presenting site maps, wireframes and stuff that is more related to Information Architecture (IA). Using these materials to showcase UX work is not incorrect, but it underestimates what a UX is.

How Do We Perceive the UX Term?

According to understanding, scoping and defining user experience: a survey approach study, people have different perceptions of what a user experience really is. But they all still agree that it is highly related to communication between a computer and human and not based on the traditional Human and Computer Interaction (HCI), which measures task solution, final goals, and achievements only.

Can You Actually Design a UX?

Understanding what a user experience is, is the only solution to help designers get the right answer for this question. Marianna Obrist et al’s  interaction design professor at University of Sussex article  “Evaluating user-generated content creation across contexts and cultures” suggests that the UX is a result of certain factors such as fun, emotion, usability, motivation, co-experience, user involvement and user engagement.

It’s all based on the person’s emotions, expectations, and the situation he is using the product in. All of these aspects are not designable. Therefore we don’t design a UX, we design for it.

It is possible to have a good understanding of how your user will judge individual variables while using your product or service. The information architecture and user experience expert Peter Morville created the “Facets of User Experience” diagram to illustrate the aspects of user experience that requires the user’s judgment.

The model suggests that the user mainly focuses on judging if a product is useful, usable, desirable, findable, accessible, credible, and valuable.

Keeping those aspects in mind while designing a website or an app will help you to expect the user experience that your user aims for and design for it in the best way possible.

If it’s Not UX Design, Then What Is It?

Steve Jobs gave the perfect answer to this question when he was asked what he does as a UX designer, he said: “I play the orchestra”. The conductor doesn’t’ write the music sheet or play it. But he tends to bring out the best of it.

Another good example is a movie director. He doesn’t write the story, shoots the scenes, or recorded the sound. He takes it all directs it in a way that will provoke a certain feeling in the audience.

UX design requires collaborative team work too. The UX designers don’t produce anything tangible. For example, the User Interface (UI) designers create the interface. The copywriter produces the copy. The developers write the code, and so on until the product is made.

User designers don’t create the experience, but it can be molded and directed. A great director will bring out the best in a story, while a bad one can ruin it. The same goes for UX designers. They cannot fundamentally control every detail of the experience, but they can influence it, and direct it.

A Tip for User Experience Directors

When designing for a user experience, try to understand your user’s expectations deeply and then exceed it.

Kotlin… Providing A Better Developer Experience

0
Kotlin

Having a delightful developer experience is as essential as the user experience itself when developing a mobile app. Using a programming language that allows you to edit codes easily and solve problems assures that your users will continue indulging in that great experience. Now programming developers are confident Kotlin’s the next big thing in the Android programming world, even though it was developed by a third party company (JetBrains) rather than Google themselves.

A lot of the Android supporters took their sheer enthusiasm into social media soon as Google announced Kotlin as the official first language for Android. Lots of them reacted to the news by saying things like “I’m almost crying right now” on Twitter.

You have safety, interoperability and code clarity, but how good is Kotlin?

How It Enhances the Developer’s Experience?

·       Say Bye Bye to Null Pointer

With Kotlin, there will be no more null pointer exceptions. This awesome language will help developers avoid this unsolved issue they face while using other languages such Java, because it’s type system doesn’t compile code that assigns to return null.

It helps developers to avoid errors. It’s efficient compiler is specifically designed to auto-cast mistakes; in case you have checked a type as a right. Kotlin is an efficient language for developers with rich features that include built-in null checking, highly compatible with Java code, extension methods to add new functionalities to existing classes and much more.

·       Code Less & Develop Faster

Kotlin will allow developers to speed up their programming process. The coding process is 20% less compared to Java. A 50 lines code written in Java can be done with 2/3 lines in Kotlin. Such a feature will help in increasing the developer’s productivity levels and decrease the time and effort used to create the awesome apps they supply Android users with.

·       Learn It In Few Hours

Any app developer can learn to code with Kotlin in few hours, especially the ones who are used to code with Java and Scala, because Kotlin looks a lot like Scala, but it’s simpler than other programming languages. It has a lean and intuitive syntax that makes it easier to learn, and it eases debugging when writing codes.

·       Build a Bridge of compatibility

This new language offers greater compatibility with Java. This feature offers a great advantage for the developers. They can code a single project using both Java and Kotlin languages, in addition to the ability to use Kotlin’s features without having to edit any existing code in their current project or have to start a new project.

·       Use It for Free

Programmers can explore their development skills using this delightful programming language without having to pay for that since it is available for free.

Start With Kotlin To Have The Amusing Developer Experience

Kotlin was not announced as a first class programming language by Google for no reason. The features this excellent language has helped the developers to overcome the issues they used to face with other app development languages. Being able to create apps using a simpler, faster, and easier language will give the developer an enjoyable experience that will help him to focus more on giving the user the delightful user experience he deserves.

Do Programmers Die at the Age of 40?

0
Developer At Age Of 40

Many programmers find that their employability starts to decline at the age of 35. Employers discharge them either because they are not keeping up with the latest technology, or because they are overqualified.

Facebook CEO Mark Zuckerberg, highlighted how young programmers are superior. An article that was published on TechCrunch technology website stated that companies prefer to hire younger programmers because they understand new technologies better than the older ones.

According to the founder of Simple Programmer and the life coach for software developers, John Sonmez, who is already above 35 years old, statistics show that most software developers are out of the field between the age of 35 and 40. But is it really just a matter of age?

What Kills the Programmer after 35?

Even if statistics proved that programming has an age limit, we still can’t draw such a conclusion without looking at other reasons.

What puts an age limit in the programming field is not the age itself, it is the ability adapt and stay tuned to the latest technologies. If a programmer is not willing to keep an eye on the newest programming languages and latest updates, his career will end at a certain age, maybe before he even reaches 40.

Is Programming a Dead-end Job?

Programming is the most extreme among those professions when it comes to having to keep up with new technologies and frameworks and grow in the field. Programmers shouldn’t think of their career in such a way. They must overcome this idea by staying learning all the new technologies and programming languages.

By the time a programmer reaches 40, they must be afraid. They must become a better programmer than those who recently graduated because in addition to their skills and knowledge about the latest technologies they will also have the experience that will help them in leading huge projects.

Are There Any Survivors in This Field?

Rob Fletcher, a senior software engineer at Netflix, joined Netflix at 42. Now, he’s 45 years old.
“I write code every day. My current favorite language is Kotlin. I’d like to learn more Go. I regularly use Java, Scala, and Groovy. I learn new things all the time,” he said.

His love for Kotlin tells us why he got a chance in the field after 40 because he is eager to learn all the new.

Another great example is Ebbe Kristensen, a 62 years old senior software designer at Prevan IT solutions company. He applied for his current job and got it when he was 58.

Any job can be classified as a dead-end job if you don’t keep on learning new skills and practice. If you want to grow and last longer in your field of interest, all you have to do is to learn how to adapt and stay abreast of the latest technologies while increasing your knowledge.

Why Your Business Needs a Brand Style Guide

0
Branding Style Guide

First impressions help in shaping the way new people perceive you before they start knowing more about you. An inaccurate first impression is hard to change.
Your visual brand identity should have a huge impression that will denote what your business is about. It can either draw people in or turn them away.

Visual styling will amplify your business awareness, which consequently will help define your brand name in the market. Why is that important? Well, most brands need to boast promise about their service or products at the forefront of customer’s minds. Without a brand persona, your brand will slowly wither away.

What Is It & Why You Need It?

A brand style guide is a catalog that regulates how an organization presents itself to the world. It includes the elements of your visual identity as well as a list of how and where to use logos, colors, and typography. This guide aims to maintain consistency by demonstrating what a brand looks and feels like when presented in any channel or medium.

How to Set It Up?

·       Base It On Your Brand’s Intangible Pillars

According Percolate marketing agency blog post Defining Brand Identity, visual branding is just one part of your brand pillars, which includes your business’s mission, values, purpose, positioning, the tone of voice, look and feel.

Parts such as mission, values, purpose, positioning, the tone of voice are all intangible brand pillars, but they are the core stone of each marketing material you use. Basing your brand style guide on them will help you determine the best way you want your brand to represent itself visually to your potential clients, and how you want them to perceive your business. If your visuals do not match your mission and values, it will frustrate and confuse your clients.

Setting your mission and values will help you determine the picture that you want your visual elements to reflect when used across different mediums.

·       Create Your Logo, Create Your Flag

Imagine a world without logos. Imagine your favorite football team without their customized clothes, your country without a flag, and your favorite watch without a brand logo. A lot of unique attributes will be missing without them.

Visuals are the first thing our brains process. Having a compelling logo is the most valuable visual element in your brand identity. It’s your flag. It speaks about your business, delivers a visual message about your mission, and gives clue about the level of service or product you are offering.

Have variations of logo designs within your brand style guide to help you utilize the appropriate brand image on different marketing channels and materials.

·       Choose the Colors that Trigger the Right Emotions

When it comes to brand recognition, colors play a primary role. The choice of shades influences audience’s emotions and help them differentiate between competing brands. Lots of studies proved the effect of colors on the clients’ emotions.

That is why an intensive research should be done before choosing the final colors of your brand.

According to Colors Psychology website, a lot of tech firms chose or green to reflect a sense of liveliness, calmness, and refreshment. Financial institutions chose shades of blue to reflect trust, security, and dependability. Meanwhile, many retail outlets picked orange or green as a brand color to reflect a cheerfulness, optimism, and stability. Most food outlets chose various shades of red because of its ability to trigger people’s appetites.

Have your approved colors in your style guide to use the same shades across your marketing materials to ensure building a reputable brand and minimizing the room for error.

·       Pick a Typography That Reflects Your Brand Image

To have a reliable brand, you have to select a suitable typography. Fonts play a significant influence on people’s purchasing decisions and help in emphasizing the message your brand tries to deliver. Choosing the wrong font style can be bewildering and may leave them feeling blasé about the whole experience.

Typography concerns the style and appearance of any lettering or fonts used as part of your visual brand identity. These characteristics can have a significant influence over people’s purchasing decisions and help to emphasize the message of your brand further.

Typeface and font choice can affect whether the right message is communicated and these should conform to the overall visual brand style. Wrong decisions can be devastating, for example, Comic Sans font, which reflects a sense of playfulness, is not the right choice if you want it to reflect a serious brand image.

Decide your primary and secondary fonts and their preferred font size and add them to your guide.

Keep Your Brand Style Guide Near Your Hands

In today’s competitive market you can’t afford to fail in making the decision when it comes to your visual brand identity. Business’s first impressions matter and they last longer than we think. That’s why having a brand style guide is a must if you are aiming for a reputable brand image.

Why Your Mobile App Must Be “Thumb-friendly”?

0
Thumb Friendly

Have you ever browsed a website on your mobile phone and the buttons were smaller than your thumb, so you had to zoom to click the button? Maybe used an app that had unconventional button placement, either because the buttons are not designed for your finger size or because the location is placed in an inaccessible area.

Having bad user experience design (UX) will make your user runaway and possibly find an alternative to your app without thinking twice. That’s not what you want now, is it?  We browse apps and websites on our phones all day long. Aiming to provide an immersive experience is key to a good UX design, at least that’s what expert Steven Hoober thinks.

In his book Designing Mobile Interfaces his finding showed that 49% of the people held their phones with one hand, 36% cradled their phone using both hands, one to tightly secure it in place and the other to tap with, and 15% held it portrait or landscape with both hands. In all cases, they were using their thumbs to browse the screens.

So what marks the essentiality of making a thumb friendly design with the limitation of the touchscreen seeing gaps at the edges are outlines of the display’s gridline construction and interference?

Touch Target Size vs. Average Thumb Size

Mobile app designers tend to create buttons and icons following the suggested target sizes. Apple’s iPhone Human Interface Guidelines suggests that an ideal touchscreen target size is 44 pixels wide and 44 pixels’ length. Android Material Design suggests that is must be 36 x 36 pixels. Microsoft Guidelines for Targeting suggests a touch target size of 48 x 48 pixels. Nokia also indicates that a target size 28 x 28 pixels. So do these target sizes align with the average dimension of the adult thumb?

According to Smashing Magazine, all of these target size suggestions are smaller than the size of the average adult thumb, which equals 2.5 cm, and converts into 72 pixels. Designing icons with this size does wonders, because when target size increase errors probabilities decrease and the user will be able to complete the mission he used your app to accomplish and a single tap of his thumb will do the trick.

Locate Your Content on “The Thumb Zone”

When planning to design a mobile app, you must think about accessibility of content. The ‘contact patch’ will vary based on the patch size of the user. Look at it this way. The entire screen is segmented into primary, secondary and tertiary.
The primary has content situated in the middle of the screen. Text messages, stories, news feed, photos and videos, any type of content that will instigate the user to interact easily using opposable thumbs.

Hoober used the term “The Thumb Zone” to the map that he created to show app designers how to locate content based on priority on touch screens for a thumb-friendly experience.

A great example of an app that follows the “The Thumb Zone” structure is Facebook. The main content of the app – which is the newsfeed – is located in the natural area in the middle of the screen. This gives the user the ability to easily scroll over the app. Also we can see the friend request icon included in the natural area.

Since viewing the new Facebook stories is not the main goal of the user of the Facebook app, it is placed it in the stretch area, where it is reachable, but not as easy as the content of the natural area.

In the upper “Ow” area we can see a small part of the search bar, in addition to the “More” button, which is considered as a less relevant content for the user.

Keep the Thumb-Friendliness on the Top

There are a lot of elements that should be taken into consideration while designing for a mobile app user experience, and making it thumb-friendly should be on the top of them to let your user have the user experience he deserves. Don’t design a pretty little app, and don’t make it chunky and annoying. Make it reasonable with a clean design that comforts their thumbs to encourage your users to stay more on your app.

Why You Shouldn’t interrupt a Web Developer

0

Web developers are unique individuals. Their lives function in a certain way that differs from other people. For example, we all get interrupted at work, and we all need a certain time to regain focus when we go off track. It is not the case when it comes to web developers because they will require more time to reorder their thoughts for when start writing codes.

Some developers rely on the “mental model” for when they code – in which the process of reflection coincides with how they arrange their work priority structure on what they need to do first in their mind. All of the work is saved in the frontal cortex for long-term storage when fetching information is necessary. If you interrupt them, chances are, that chain of thought will pretty much be lost.

Imagine having a phone call, or a small talk that a colleague started every two hours! It’s grueling.

What Happens When You Interrupt a Developer?

Jaxenter programming news website stated that a study suggested that a person will need 15 – 23 minutes to regain focus after they get interrupted. This is not the case when it comes to a web developer because he will need 15 – 23 minutes to regain focus, in addition to extra 10 minutes to start editing a code again.

If at least four interruptions happened every day, this would waste a minimum of 2 hours of your developer’s time, not to talk about the pressure that interruption might create when they occur.

Planned Interruptions Are the Real Evil

Unplanned interruptions such as receiving a phone call or answering one of your colleagues’ questions are not as evil as a planned one, which we call “meetings”. According to Paul Graham the British computer programmer and venture capitalist, a planned interruption like meetings, can ruin a working day by dividing it into two parts where it was difficult to accomplish a task. The idea of having a scheduled meeting will let the developer rush into finishing his tasks before the deadline and sometimes that might not be possible and ultimately deviate from the project’s original timeframe.

Controlling interruption the most right way possible

Interruptions are the worst enemy of a web developer, if you control them by knowing how to help a developer deal with them, you will be able to avoid paying the costs when it comes to your business.

When it comes to small interruptions, you should start controlling the interruptions you create yourself, such as having your mobile device near you and getting distracted by every single notification that appears on the screen. If you’re using the computer to finish a task, also try to close all the tabs that are not related to your original work. You can turn off the email notification on your device’s screen and specify a particular time later to check your email as it will be more suitable for productivity.

Headphones are developer’s best friend. You can use it as a way to give people a sign about your working process. So if you are putting a pair of headphones that should help solve the problem. If you tend to have it cover one ear, they will be more inclined to come and talk to you, regarding anything. Another solution is to directly deal with the interrupter and politely explain to tell them about how a one minute of interruption may lead to wasting around 15 minutes of your time.

When it comes to planned interruptions, it is not easy to keep everyone happy when arranging meetings, but the best tip in this case is to schedule time around the meetings in a way that will help you to be able to have a normal productive day.

Popular Posts