Mobile UX

Mobile Website vs. Application

Before you can evaluate the benefits of a mobile website and an app you need to understand the key differences between the two. Both apps and mobile websites can be accessed on devices such as smartphones (e.g. iPhone, Android, and Blackberry and tablets. At first, what are app and website?

Apps are actual applications that are downloaded and installed on your mobile device, rather than being rendered within a browser. Users visit device-specific portals such as Apple’s App Store, Android Market, or Blackberry App World in order to find and download apps for a given operating system.

The mobile website can be accessed on a browser and it can display text content, data, images, and video. They can also access mobile-specific features such as click-to-call (to dial a phone number) or location-based mapping.

When it comes to deciding whether to build a native app or a website, it depends on your end goals. If you are developing an interactive game, an app is probably going to be your best option. But if your goal is to offer mobile-friendly content to the widest possible audience then a website is probably the way to go.

Generally speaking, a mobile website should be considered your first step in developing a mobile web presence, whereas an app is useful for developing an application for a very specific purpose that cannot be effectively accomplished via a web browser.

The Differences between website and apps:

Immediacy and Findability

A mobile website is instantly accessible to users. Once they search it on any browser, they can access it seamlessly. It is also findable because its pages can be displayed in search results.

Whereas applications require users to download in order to be capable of accessing its data and content. And certainly cannot be found as they are restricted to manufacturer app stores.

Compatibility or Availability

A single website can be available to users across many different types of devices, whereas native apps require a separate version to be developed for each type of device.

Upgradability

A website is much more flexible than an app when it comes to updating content. If you want to change the design or content of a website you simply update it once and the changes are immediately visible; on the other hand, updating an app requires the updates to be pushed to users, which then must be downloaded in order to update the app on each type of device.

Shareability

A website can be easily shared by its URL link, whereas applications can’t be shared. Websites links can be shared on any platform. Publishers can easily direct users to a website from a blog or website, or even in print. An app simply cannot be shared in this fashion.

Reach

As a website is accessible across platforms and can be easily shared among users, as well as search engines, it is much more reachable than an application.

LifeCycle

The average shelf-life of an app is pretty short, so unless your app is something truly unique and/or useful (ideally, both), it’s questionable how long it will last on a user’s device. Mobile websites, on the other hand, are always available for users to return to them.

Time and Cost

Website development is considerably time-consuming and cost-effective than the development of an app, especially if you want it to be available on different platforms it requires the development of multiple apps.

Support and Maintenance

The investment considerations of app vs website don’t end with the initial launch; properly supporting and maintaining an app (upgrades, testing, compatibility issues, and ongoing development) is more much more expensive and involved than supporting a website over time.

But if the website is perfect, When Does an App Make Sense?

Despite the many inherent benefits of the mobile web, apps are still very popular, and there are a number of specific use scenarios where an app will be your best choice. Generally speaking, if you need one of the following, an app makes sense:

• Interactivity/Gaming – for interactive games (think Angry Birds) an app is almost always going to be your best choice, at least for the foreseeable future.
  
• Regular Usage/Personalization – If your target users are going to be using your app in a personalized fashion on a regular basis (think EverNote) then an app provides a great way to do that.
  
• Complex Calculations or Reporting – If you need something that will take data and allow you to manipulate it with complex calculations, charts or reports (think banking or investment) an app will help you do that very effectively.
  
• Native Functionality or Processing Required - mobile web browsers are getting increasingly good at accessing certain mobile-specific functions such as click-to-call, SMS and GPS. However, if you need to access a user's camera or processing power an app will still do that much more effectively.
  
• No connection Required – If you need to provide offline access to content or perform functions without a network/wireless connection then an app makes sense.
  

As with any project, when developing an app you want to ensure that you are getting an optimal return on your investment. What you want to avoid at all costs is the needless and expensive exercise of building an app to do something basic that can be achieved with a website.

Mobile material design

Material design is a visual language developed by Google in order to outline how applications should look like, how they should work and as a result what will be users feeling when using those apps.

Google material design specifies principles for designing. Motion, layout, style and put guidelines on patterns, design components, and usability.

Google stated “We challenged ourselves to create a visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science. This is material design.”

Material Design principles

According to Google material design:

1. The material is the metaphor

Surfaces and edges of the material will help provide visual cues that are grounded in reality. The use of these familiar attributes helps users quickly understand materials. However, the flexibility of materials creates new affordances that may displace origin affordances in the tactile reality. But without breaking the main rules of physics.

2. Bold, graphic and intentional: Fundamental design techniques

Drive the visuals. Typography, grids, space, scale, color, and imagery.

Provide visual treatments. They also provide visual hierarchy, meaning and feeling.

3. Motion provides meaning

Motion makes the user feel as he is the prime mover, but it can’t just be there for the sake of movement. Motion is meaningful and appropriate, serving to focus attention and maintain continuity. Serve to focus the design and include simple and easy transitions.

Mobile App Guide

1.Define Your Goal

You have to clearly define the purpose and mission of the mobile app.

• What is it going to do?
  
• What functions will it provide?
  
• What problems is it going to solve?
  

2. Research

After laying out application goals, it’s time to do complete research on some basic information:

• Whether there are other apps are providing the same function or not. These apps are your competitors. You have to study their weak and strong points. You will also need to study their design and other ones in order to come up with a design that has a great look, feel and usability.
  
• Know your targeted audience.  You basically design for users so study them, their needs, their goals, issues, and context.
  

3. Start Sketching

Sketch the primary foundation of the application interface.

By sketching, you categorize the main features and specifications the app will provide. You will also have an approximation layout design.

This step will help everyone on the team to be on the same page and to have a further understand the application and its mission.

4.Create a Wireframe

In this phase, you have a clearer and closer picture of the application’s features and goals. Wireframing is the process of creating a mockup or prototype of your app. You can find a number of prototyping tools online such as Balsamiq, Moqups, and HotGloo, which allows you to not only drag and drop all your placeholders and representative graphics into place but also add button functionality so that you can click through your app in review mode.

5.Define with your team the Back End of the Mobile App

Your wireframes and storyboard now become the foundation of your back-end structure. This will help the development team to get align with the prototypes and develop the back-end application.

6.Test Your Prototype and iterate

Let sample of audience try out the prototype in front of you. Monitor how they use the app, taking note of their actions and adapting your UI/UX to them. And iterate the design with solving issues.