Category “Web Design”

Microinteractions in UI – Focus on the details

Tuesday, 11 June, 2019

The brand philosophy of the most popular Design House Stockholm says “Don’t make something unless it is both necessary and useful; but if it is both necessary and useful, don’t hesitate to make it beautiful”. So, the basic idea of Microinteractions are to focus on the details that can truly transform the basic user experience of an application. There are many practices  to enhance the overall user experience such as well-structured information, meaningful content, attractive design, responsive and fast loading pages etc. But apart from all these high-level technicalities, there are micro level interaction details that can that can keep the users delighted and increase retention.

In short, Microinteractions are those tiny enticing moments built into the application, which stimulates a feeling of happiness to the end users. As a designer, identifying the micro interactions in the application is equally important as designing them. It’s the meticulous attention to detail that differentiates an outstanding website from the rest.

Definition

Dan Saffer, the famous Interaction Designer & the author of the book Microinteractions, defines micro-interactions as “contained product moments that revolve around a single use case -  they have one main task”. According to Saffer effective Microinteractions follow a four step process mentioned below.

Triggers:
This is what initiates the Microinteraction. A trigger can be a floating icon that enourages a user to click, swipe, tap, pull, scroll.

Rules:
The trigger engages the rules. This is what happens during the interaction and it needs to feel natural for a user.

Feedback:
This lets the user know what exactly is happening. For example, it can be loading animation, pop-up, color fill an icon or any other range of interaction.

Loops and modes:
This determines the length of a Microinteractions as well if the user will need to repeat it or change it over time.

Instant Feedback:

An input feedback should work instantly in a good UI system. Imagine a scenario where the user is filling a huge web form and when he clicks the ‘submit’ button after completing all the fields, the form is throwing an error message. This will make the user instantly frustrated. Besides the irritation of finding the fault input field, there is a big chance that some of the fields get empty, making you putting the whole information again. Providing information, automatically appearing when needed, will ease the frustrating process of filling rules. For most of the people, this information would be unnecessary, they don’t want to see a bunch of text before each empty field. Thus, that info can be hidden in a small icon, which expands to a small box in case you hover or tap on it.

When the user fills in form, the system instantly checks for the input text and kindly reminds the user to correct the fields if there is a mistake. The process of feedback is given straight after the users leaves that input field. The validation or help message appear only when there is a mistake, sliding from the top and colouring the filed red to attract the user’s eye.

Examples

Here are some cool microinteraction techniques created by smart UI guys which I found from various sources on the web.

Quick Reference

http://microinteractions.com/microinteractions-quick-reference/

Conclusion

Microinteractions are a great way to enhance the overall user experience of an application. Along with other tiny techniques, animations can also bring in a lot of personality which enhances the brand experience. Microinteractions can also make the app user experience easier and more seamless which is a very important aspect of product branding.

In UI/UX, it is highly important to study the behaviour of end-users and how they feel about a particular product. Even very small things require proper attention as it can turn the things in your favour. This is where Microinteractions come into play as they acknowledge the users and give them the necessary feedback and understanding of the current process, thereby making the interface more interactive and usable.

What is mobile first indexing and how will it affect your business?

Tuesday, 25 April, 2017

You may have heard mobile first indexing being mentioned, but not be aware of what it will mean for your business. The fact is, this is an important change in the world of SEO so you need to pay attention to it. Failure to do so could lead to you losing out on precious search engine rankings.

The aim of this article is to improve your awareness of mobile first indexing. Reading it should make you aware of how to be better prepared for when it becomes a reality, in the latter part of 2017.

What is mobile first indexing?

The majority of people now use a mobile device to access the Internet. Last year, Google announced its intention to test mobile first indexing, in recognition of this fact. This is a new way of determining search engine rankings, by using the mobile website of a business or organisation as the first port of call. What this means for you as a business is that, when mobile first indexing is introduced, your mobile website will be used to determine how high you appear in search engine rankings, not the desktop version of your site.

This only applies if you have a mobile web presence. But, let’s face it, what business can afford not to with mobile web browsing being so prevalent.

What do you need to do?

If you are already ahead of the game, and your mobile web presence is fully optimised, you may not have to do anything. But, this is not going to be the case for many businesses. Do not forget that simply making use of responsive web design is not enough, although it’s a good start. You still have to concentrate on providing a good user experience for mobile users. Here are some tips to help you.

  • Always think mobile first. Your website design should be centred around mobile users first, and then adapted for desktop.
  • Make sure your load speeds are quick. Mobile users expect load speeds of around 2-3 seconds. When it comes to search engine rankings, you will be penalised if your load speeds are slow.
  • Make sure links can be accessed easily using a small touch screen.
  • Use a font that enables mobile users to view content easily, without having to zoom.

All of these factors should help you optimise your web presence for mobile.

Mobile optimisation has been an important consideration for a while now. As a business, you cannot afford to miss out on such a large potential audience. Now, it’s becoming even more vital. If you do not make sure your mobile web presence is optimised your search engine rankings could suffer. The expected arrival of mobile first indexing is not too far away. This is why it’s a good idea to make a start on necessary changes straight away. You need to give yourself time to make sure your mobile website is as effective as possible. If you feel as though you are struggling with making this happen, you may want to speak to experts in web design in Sydney. They can help take the workload off your shoulders, and produce the results you need.

Stun and Amaze With Your Website Design

Thursday, 9 February, 2017

People are visually oriented these days and you must stun and amaze them with your website design. Slapping a few pretty pictures on your Home page is not going to do the trick. There are tools out there that help you create an enticing experience that will keep your visitors on your front page and encourage them to click through to your other pages. How your website is set up is the first step in creating a user-friendly space. What people see is your second consideration.

Navigational Structure

When mapping out your small business website design, the first thing you must do is consider your navigational structure. Your home page is key here. When people enter your URL address or click through to your page, they want to see something that is user-friendly. If you do not present quick and easy links that are visible to the other pages on your website, your visitors will hit the back button and move to the next website in the search results. How to get from Point A to Point B must be obvious to your visitors right away, but that’s not all.

Point A should take your visitor cleanly to Point B. If your visitor clicks your About Us link from your Home page and he or she is taken elsewhere, you’ve just guarantee two back-button clicks to get out of your website altogether. Your navigational structure must be concise: A click on a product picture to the product page with the description, and then a click to the shopping cart to purchase it. Don’t muddle your navigation with confusing landing pages that don’t take your visitor where he or she wants to go.

Enticing Your Audience

You must also entice your audience. Your goal is to get people on your page and keep them there, so they’ll be more inclined to shop and make a purchase. Part of your navigational structure can be to direct users to your About Us page and then tell a compelling story. Explain why you do what you do, what got you into your business, and how you conduct your business, especially if you’re doing something that makes a difference in the world today.

Also stimulate them visually. You want to catch their eye with your website design, so infuse a lot of visual cues. For example, instead of writing out what you do, tell people what you do using video. If you do write it, make certain to include a ton of pictures to guide them through the story. You can also demonstrate how your product is manufactured or how people use it. The bottom line is to entice your audience visually and use these videos and photos to help them navigate through your space.

This is a lot of programming, so make certain to enlist the help of a web builder. If you are strapped for operating funds to hire a professional website designer, you can use a less expensive website builder to help you design your pages. If you have the cash, enlist the help of a professional, because once you have a website that amazes your visitors, you’ll be surprised how easy it is to grow your business.

7 Out of 10 Mobile Apps Fail Due to Lack of Strategy

Saturday, 10 December, 2016

For business owners out there looking to cash in on the money-making machine that’s known as mobile applications, be aware that the majority of apps are getting downloaded fewer than 500 times a day, and only the top 5% of all apps in Google Play and Apple’s App Store are generating more than $1250/day in revenue.

These numbers are nothing new, stemming from a Gartner report published in 2014. However, instead of just predicting most apps will fail, I propose one of the key reasons for so many apps not managing to become successful.

When we talk about mobile applications, most people are thinking of games, Facebook- and Snapchat-like apps, when in reality enterprise applications are among the top in terms of project costs and amount of money invested.

These enterprise apps are also among the most successful, because they’re specifically designed to eliminate certain issues, always solving a specific problem such as managing remote workers, keeping track of inventory throughout retail stores worldwide, and other complex solutions.

Compared to the vast majority of publicly available apps, this is one of the key differences. Looking at Google Play or Apple’s App Store, there’s a large number of so-called “life-enhancing” apps, tracking your fitness level, making sure you can find that song you heard on the radio, or something else along those lines.

While some of these apps are doing quite well, both in terms of active users, and revenue generation, most of them are not. And while more than 1 billion downloads happen on both App Store and Google Play respectively, the majority of those downloads come from the same top 50 or top 100 apps, leaving the rest of the 2 million apps in either store left fighting over the scraps.

I’ve looked at 100 random apps on Google Play over the past week, and come to the conclusion that the single most common reason that an app fails comes down to bad strategy.

This term covers a few different aspects, so let’s go over each reason in detail:

  • Target audience too small
  • No App Store Optimization
  • Bad Marketing Strategy

These 3 reasons can be applied to more than 90 of the 100 apps I looked at, while the remaining apps had very specific reasons for not performing well, and so those last apps are not of general interest to us.

Target audience too small

Let’s consider the fact that some of the apps I looked at had been featured on TechCrunch, Mashable and other large worldwide websites with millions of monthly visitors.

Some of these apps even had great ideas and concepts that were unique and solving real problems, but the issue with those was the fact that not enough people had those problems.

Let’s face it, you’re never going to reach 100% of your target demographic. In fact, if you ever reach 30% or more, I’ll consider you a stunning success.

The reality is, that on average, you’re more likely to reach 1-5% of your target user group with a successful campaign and strategy running.

Then you have to consider that out of all your visitors and users, there’s a conversion rate, meaning that not all of your visitors will buy your subscription, or pay for your app. That number is also around 1-5% depending on the market.

So if your target demographic is American Fishermen on the East Coast, there are only X number of those users. Let’s say 100,000. Out of those 100,000 you are reaching 20% because you’re awesome at marketing, and your app is great so people talk about it.

That means you have 20,000 people reading about your app, visiting your website or your app store entry. Great right? It would be, if all those converted into app downloads or subscriptions.

The problem is, that out of those 20,000 people, you only convert 5% (let’s be optimistic.)

That means you only get 1,000 downloads in total, and that’s with a successful app and marketing strategy in place. Of those 1,000 downloads, you then have the problem of retaining users, meaning that 9 out of 10 apps downloaded are only opened once, then forgotten or uninstalled.

So in the end, you are left with a very small amount of users, even though you managed to run a great campaign, create a great product, and convince a large amount of people of your app idea.

No App Store Optimization

This is one of the single largest factors in why apps are not successful. Most apps I looked at had fairly unique ideas, or at least performed a valuable service or function which should prove useful to a lot more people than currently downloaded the apps, meaning that not enough people knew about them.

While ASO is mainly associated with keywords and app names on the stores, ASO goes beyond that, and is an ongoing process, much similar to SEO for website owners. And also like SEO, ASO is not directly comparable to App Marketing, although they do certainly overlap in some areas.

This means that it’s necessary to devote a continuous amount of effort and resources to put into this aspect, but it is not the same as old fashioned marketing either.

Establishing an online and offline presence that allows the maximum amount of eyes to see your mobile app is vital to ensuring a successful app launch, and is the single most important thing in my opinion.

If you’re not sure about app store optimization, I advise you to read up on the topic, as there’s a huge potential here for anyone not having done so already.

Bad Marketing Strategy

Another of the most common problems I saw was how badly managed or lacking the marketing efforts were.

Either the creators relied on their app idea and concept going viral, which at best provides a spike in traffic which then again dies out, or the app did not go viral, and the traffic never even got started in the first place.

Someone has said you should spend 20% of your budget on app development, and 80% on app marketing. I agree with this sentiment quite a bit.

Of course, there are exceptions to this rule of thumb, but the point you should understand, and accept, is that the app itself could be the greatest thing out there, but if nobody is talking about it, and nobody is linking to it, then nobody will ever find it or download it.

So consider how to market your app, even before you start development. In fact, if you can not create a good marketing strategy that you yourself believe wholeheartedly in, perhaps you should not develop that app after all.

Like ASO, mobile app marketing strategies are a topic in itself, and to become an expert requires significant time and efforts, and I encourage you to read more about this subject in detail if you’re in the app business.

Conclusion

It’s important to consider as many aspects as possible before beginning an app development project, and sometimes that means discarding an otherwise good idea, because it fails on a single aspect.

Hopefully that can be fixed, but if not, you should seriously consider changing your overall app concept to better align itself with the 3 key points above, which in my opinion are crucial for any app store success.

Mark has been developing for the web since 2001, always with a penchant for open-source technologies such as PHP. Since 2010 he has been working full time with app development, these days being employed at Nodes, a leading European app agency. He also regularly contributes to WordPress and other open-source projects.

Top Factors that Has a Great Impact on Mobile App Development Cost

Sunday, 14 February, 2016

There are two types of aspiring businessmen – one who executes their business ideas after estimating the development cost of their product, and another is one who put their product first, without even considering the development cost.

And, mobile app development is one of the expensive processes that require a lot of time and money. If you want to build a highly intuitive and feature rich mobile app, then you need to add hefty cost to your project.

There is no doubt that mobile applications are the powerful and advanced marketing technique that drives traffic, boosts the popularity of your products that in turn increases the sales and growth of your business.

However, development of a mobile app is not cost-efficient, and this is the main reason why most of the companies skip the idea of getting into the mobile application market.

In fact, there are various factors that are affecting the development cost of mobile applications; therefore, many business organizations face challenges while building their mobile app.

In this blog post, we will have a look at some of the key factors affecting the mobile app development cost. And, also give you some resourceful tips that will help you make the most affordable decisions, and offer you the best ROI of your development budget.

Factors Affecting the Mobile App Development Cost

Operating Systems (OS)

Developing a mobile application for internal user is comparatively less expensive than doing it in a bring-your-own device (BYOD) or external environment because here you can solely decide on how many mobile devices or platforms you will support.

But for BYOD or external users, you need to create an application that will work across every mobile platform and device. First, you need to decide on which operating system(s) you will support and latter you will determine on how to support cross-platform applications.

This wastes both your development time and money.

Mobile Devices & Platforms

Many web app developers find difficulties in deciding whether to support Android, Windows or iOS platforms or all of above. But by deciding this, you will easily estimate both the development time and cost.

As we know, all platforms available on the web market are different from each other. Native apps are developed in the operating system’s specific language such as Objective C or Java, while web applications are developed as web pages and thus not reliable on a specific operating system Language.

However, developing the HTML5 web applications are much cheaper than developing the OS-specific apps. But still, 25 % of app developers are using at least three different mobile devices or platforms to go online.

So, it is better to decide at the beginning of the development process if you want to save your development cost and time.

Functionality of Your Application

At the time of development process, you need to finalize the functionalities that you want to embed in your app. Well, the involvement of functionalities completely depends upon the category of the app and for whom the app is developing – potential customers.

For example, if you want to include two-dimensional games then it would cost you less, but if you want 3D animated games, with robust sound effects to attract more customers, then you need to incorporate extra functionality in your basic ones and thus you need to spend more money on it.

Backend Verses Native

You may need to pay more if your mobile application requires a backend. It is because another resource has been embedded into the project as it requires web based programming skills. Plus, the developers need to put extra efforts to build a backend that are reliable on the complexity of features.

Usually, a backend is used to store all the user-based information. Another example of a complex backend is when you require social sharing network fundamentals like sharing data, connecting two different users and more. In such a situation, you need to pay cloud hosting cost, along with development cost.

Content Management System

Another addition to the cost will be a Content Management System (CMS). If you want to update the content of your mobile app on frequent basis, then you need to integrate a Content Management system.

The CMS allows multiple stakeholders to add their content from the backend (managed and controlled by your or the admin). You can easily add/edit product information, categories, pricing on an online app, etc.

Social Media Integration

In the present day, it becomes essential to integrate a social media into your website and mobile app if you want to engage more and more web customers.

In order to integrate social media features into your mobile app, you need to spend more money during the development process. However, it is better for you to determine what type of social features you want to add into your mobile application.

You can opt for a feature that allows your visitors to share your content on their social media profiles or want a feature where your customers can share data with each other. Well, there are two ways that will enable your visitors to share your data – Twitter-type follow or un-follow or Face-type friend request management.

Distribution of Mobile Apps

There are various distribution channels for your mobile app deployment, and each channel has its own sets of costs. For an example, Google Play – a commercial distribution channel charges higher developer license cost. Therefore, it is important to choose the cost-effective as well as reliable distribution channel.

However, you can find other options on the web market such as corporate app store, which is administered via an enterprise mobility management (EMM) platform. Under this, all the mobile apps are deployed to the corporate storefront for authorized devices and users.

Use of 3D Animation/ Visual Objects

Today, most of the app developers want to integrate complicated UI components into their mobile app with an objective to give a high-end user experience to their potential customers.

Therefore, many of them are integrating real-time 3D animations/graphics, visual transitions to make their app more real and user-engaging. If you want to do the same, then you need to contribute more into your development cost.

Third Party Integrations

A mobile application either can be self-contained or connected with an enterprise system. If your mobile app doesn’t want enterprise data, corporate access, or enterprise system, or central business logic, then the cost of development will be reduced and restricted to app development procedure only,

But, if you want a mobile app with third party integration, the development cost will exceed to enterprise web services and data access, third party APIs and other integration tools.

Thus, it is important to consult enterprise architects before taking any decision. They will calculate your basic requirement and let you know about best deals.

Maintenance – After the Deployment of A Mobile App

Maintenance of a mobile application is crucial that needs to be done very cautiously. If you are thinking that your mobile app development cost will cease after its deployment, then you are completely wrong.

Generally, user feedback is immediate and that includes problems, issues, suggestions and modification requests and much more. Therefore, it is better for you to hold up your entire development team for some more time after the deployment, so that you can instantly solve the issues and make quick enhancements.

Conclusion

With the help of this blog post, you can easily determine the multiple factors affecting the development cost of a mobile application. Now, you can strategize your plan and estimate the budget before getting into the mobile app development procedure.

This article is written by Tracey Jones, a front end WordPress developer at HireWPGeeks Ltd., a leading custom WordPress development company across the globe. She is a passionate blogger and has been actively writing excellent blogs and articles about technical stuffs.

Integrating Alpha Anywhere With PhoneGap Build: The Why and How of It?

Thursday, 4 February, 2016

App Development is no longer a buzzword and has become one of the most important mainstream components. Simply put, having a mobile app is a necessity that is getting difficult to ignore for businesses and individuals. After all, 60 percent of digital media time is spent on apps.

When you decide on developing an application, you’ll to choose between a native app or a hybrid application. The hybrid or native app debate is not new, however, choosing the right option to play a vital part in a project’s success and failure.

While building a native application is an excellent choice for users wanting to have a dedicated iOS or Android app, but for creating a cross-platform app, you need to opt for a hybrid app. The majority of users prefer creating a hybrid app over the native one since the former helps provide the advantage of a web application and device features.

Besides, several tools such as PhoneGap helps in performing hybrid application development in a breeze. But the agenda of this post isn’t merely discussing the differences between native and hybrid app. Instead, I would like to cover information about the integration of new software called Alpha Anywhere with the PhoneGap Build.

But Before We Start

Let’s talk about what is PhoneGap Build. As you may know, Adobe’s PhoneGap helps save time and money in comparison to native application development. However, it still needs to work with SDKs – that consumes a lot of time and requires expertise in setting up. To reduce the time spent in setting up the SDK, PhoneGap Build was created.

What is Alpha Anywhere?

In order to automate PhoneGap Build and save even more time in developing cross-platform apps, a new software Alpha Anywhere is integrated with it. Below are the  key points that will help you understand how the integration of Alpha Anywhere with PhoneGap Build can save enormous amount of time:

  1. Alpha helps in locating the PhoneGap Plugins that you may need and add them to your project automatically.
  2. It helps users access the apps created using the inbuilt manager screen quickly.
  3. Alpha enables you to produce icons and splash screens in the app for all the main platforms according to desired resolutions and more.

Let us now discuss the main advantages (as discussed above) that Alpha Anywhere integration offers in detail:

1. Managing Plugins Becomes a Breeze

Plugins let your HTML5 apps interact with the device hardware to get access to the files, Geolocation, etc. At present, Alpha Anywhere comes with 72 built-in plugins and several other plugins are in the development phase. So, you don’t need to find out the plugins yourself, and rather can locate them by getting the checkbox next to the plugins checked as shown in the image below:
Alpha Anywhere for PhoneGap

2. PhoneGap Apps Are Easily Accessible

Developers just need to login to their PhoneGap Build account right from the IDE, and they get the ability to create an entirely new business application, update already existing app, or delete an app on PhoneGap Build.

What’s more? You can view all of the PhoneGap Build apps listed in the PhoneGap App Manager. The app manager comes with buttons that showcase the QR codes that enables users to install the business app on their mobile device for testing instantaneously.

pic-2

3. Generate App Icons and Splash Screens Quickly

Another great benefit of Alpha Anywhere is that you can produce all of your application icons, as well as, splash screens automatically. Also, splash screens work well with all of the supported platforms and at needed resolutions. This helps in handling device displays, such as: retina and non-retina. Performing this process can take an entire day, however, Alpha let you pick required images, and get the task done in just minutes.

4. Access to “Pre-written” and “Tested” PhoneGap Code

Lastly, Alpha Anywhere contains written and tested code that can be used for extending your plugin features. Below are some examples that will demonstrate this process:

Images: Alpha Anywhere allows to access the “exif “data of your device pictures, which includes details of where the image was clicked, the camera orientation at the time when the photo was taken and other data.

The File System: Alpha comprises of code that enables you to work with the massive amount of data (more than 5MB) in the offline mode. For this purpose, Alpha make use of a simple/complex nested database query when the device is connected to a network. For example, a product catalog or selecting a customer account to access mobile field in the online mode may be sporadic or such functionality might not be available.

Audio: If you need to build an app with functionalities such as voice dictation and audio capture, you can find the Alpha code to include such features. The best part is that the code is saved in a standard format, making it run on various platforms like iOS, Android, and many others. Also, the code can help in controlling compression for saving storage space, lets you control functions required for audio recording.

Summing Up!

Integrating Alpha Anywhere with PhoneGap Build is an excellent approach to performing mobile app development, as it lessens the amounts of time needed while setting up the SDK and during the beginning phase of app development. Also, it helps shorten the time you’ll have to invest in iterative development of an application to fix any bugs and to enhance features. Hope that the post will provide you a good understanding of the benefits of integrating Alpha Anywhere software with PhoneGap Build.

This guest article was written by Ella Cooper, who works in a leading web development company as a programmer. Apart from programming she has a penchant for writing and thus she shares her development experience through blogging.