Application Interface Design: Techniques to Increase Usability

web designWebsites used to be the only offspring of the World Wide Web, but now they give birth to more and more applications. This new generation does not have the platform constraints or installation requirements, of the former, making web apps quite an attractive option for businesses. Web application interface design is a form of web design, but its focus is on function. These applications offer simple, intuitive interfaces that are user-responsive, which allows users to get things done with less time and effort. To achieve this, below are some points to consider and include in your web application interface design.

Take a course at Udemy.com to learn all about UX Design

Interface Elements

Interface elements should be on-demand. What does this mean exactly? It has purely to do with clarity and conciseness paired with navigation; or more simplistically stated, keep it simple. Simplicity is very important in interface design. Your users will have difficulty finding what they need if your interface design is crowded with too many controls. Think of a restaurant menu: if it’s two pages, you quickly figure out what you want and place your order. However, if it is eight pages, you cannot decide, everything sounds good; you don’t know what the right choice is for you. The waiter has to keep coming back to check if you’re ready to order. Where the choices are fewer, the available functions become clearer to the user, as they can scan and find what they need. As easy as this sounds to do, don’t be fooled; it takes a lot of fine-tuning to design an app for simplicity while maintaining full functionality.

Specialized Controls

When designing an application interface, it’s important to select the correct interface controls for the situation. Certain controls are better for some situations than others. There are many types of calendar features, some allow a simple view, some have a few selection features, and some allow you to lock in a range of dates, including time of day. Select the type that is correct for the situation you are designing for. Sliders are another place these controls should be carefully selected for ease of use in choosing numbers.

Learn how to design for productivity in the user experience at Udemy.com

Disable Pressed Buttons

When a user presses a submission button and the website lags, what do they do? Usually they press it again, sometimes more than once, and very quickly. The submission process is one of the biggest problems associated with an application. Usually, this control is handled well with credit card transactions, but it should be given the same care with form submissions to avoid multiple submissions. Disabling these buttons once pressed is easy to do, and is essential.

Both client-side and server-side code must be safeguarded. Client-side code is a part of the design. Server-side code is for programmers and is dependent on the coding language. It’s a check to ensure no duplicates go through. The client-side stage is a simple, disabling of the “submit” button the very moment it is clicked, using a JavaScript code such as the following:

<input type=”submit” value=”Submit” onclick=”this.disabled=true” />

You can also make the button look pressed visually. This action is purely visual for the user to know that they have already pressed the button. It will make your application feel more responsive. You can code this in CSS: if your anchor has the class add_task_button, style the active class by targeting add_task_button:active.

Shadowing Around Modal Windows

Pop-up menus and windows often have drop-shadows, but this is not for mere aesthetics. They help the window differentiate from the background. They also darken the area behind the window providing the user with a clue that it is in the background and not active.

Traditional desktop applications used this technique to force the user to focus on the active window. Modal windows cannot be as easily distinguished form the main content in the desktop applications. These drop-shadows make the windows appear close with the three-dimensional aspect the shadow grants.

To create these drop shadows, a container with a transparent PNG-image is used as the background by the designers; equidistant padding is used on all sides of the box. Sometimes a background image with transparent borders with the content box positioned using absolute positioning in this image. For CSS, this is coded as:

.dialog {    
position: absolute;    
left: 50%;    
margin-left: -315px;    
width: 630px;    
z-index: 100001; 
}.dialog .body {    
background:url(/img/dialog.png) 0 0; /* semi-transparent .png image */   
padding: 40px 13px 10px 40px;
}

JavaScript-based lightboxes and drop-shadows can be used, but Internet Explorer does not support them.

Functional Empty States

When designing a web application, make sure the design looks good when no content is present. A message that tells the user how to start is an excellent choice for content. Provide a welcome message and a bit of direction or even a button that starts the process. It’s all about usability. A blank state is not usable.

These messages and features will encourage the user to try out the service you are offering. A guide to help the user through the application helps them decide if it is useful to them or not. Focus on the most important options, so as to not overwhelm the user with too much content.

Learn iPhone app interface design for beginners at Udemy.com today!

Context-sensitive navigation

One of the ways designers can provide what the user needs when they need it is to use context-sensitive navigation. An excellent example of this is the Microsoft Office Suite. When Office 2007 rolled out with the upper ribbon navigation, users would find access to everything they need when they need it, and not all deep features of Office when they didn’t. This context-sensitive navigation is very well thought out and helpful to the user.

Emphasis on key functions

Controls often are found side-by-side in groups, but they don’t always hold the same importance. Many times one function is the one most users will use, but a few may need the other. Provide emphasis on the most used control, and lesser emphasis on the less important function.  This emphasis is done using styles or types of controls. Some applications use the form input button for the create action, with the cancel action showing as a text anchor. This gives the create button more of a clickable area, and the user notices it better.

UX Design Quick Course

ux designUser Experience (UX) Design is complex and ever-changing. It’s vast in its scope and far too expansive for one article, but an outline is provided here for a better understanding. So, what exactly is UX you ask, and why is it important? Well I wrote another post on that very topic. Now that you’re caught up to speed, we will move forward into the realm of UX, which includes information architects who develop their user stories to map out a wireframing plan. But first, we must understand the user.

Take the Ultimate Guide to UX at Udemy.com [Read more…]

How to Upload a Website and Make It Accessible on the Internet

how to upload a websiteBuilding and uploading your own website is a rewarding experience. When I built my electronic portfolio and uploaded it last month, it was such a proud moment that I hailed it all over Facebook, LinkedIn, and my WordPress blog (WordPress Mastery ). I made a QR code and printed new tech-savvy business cards, until I broke my printer. Within two weeks I had three freelance jobs, and two became permanent. You are reading this blog because I made that portfolio and put it online. I’m not a techie, I am a writer. I’m not young, my first computer experience was with DOS. If I can do it, you can too. The biggest hurdle for most people is not how to make a website. They can find the software and tutorials and have seen enough websites to know the conventions of navigation and hierarchy that are best to use. But to actually put the site on the Internet is a daunting task, more mystifyingly technical than the design, writing, and photo uploading we’ve been doing. It is much easier than you expect. You only need to follow instructions. The words you need to know are File Transfer Protocol (FTP). We’ll get to that later. Here’s a bit of summary on building a website first, for those who haven’t actually brought it to fruition yet. [Read more…]

WCF Interview Questions

Weaknesses For InterviewsYou’re smart and skillful. You have a resume, and a portfolio. What next? The interview. There are many types of interviews. You might get a phone interview that extends to a Skype interview. But if you are among the lucky few, you get to sit among the finest skill-driven competitors you have ever encountered and win the job out from under them. When your name is called, you walk behind that door to your future.

How to get your dream job

Your first step toward that goal is to brand yourself. If you’ve got tech skills—and you wouldn’t be trying to get a Windows Communication Foundation (WCF) job if you didn’t—you should design your online portfolio, include pieces of your work, and post it online and link it to every online place you can. You are proving that you have skills, send the link along with your resume. It can kind of act as a pre-interview, making your interview be more about can I work with this person. If you have design skills, design your own background and logo. Get a nice headshot, taken without dirty gym socks in the background; use this photo for all your online presence. [Read more…]

Web Application Testing Checklist

web application testing checklist

Web application testing can take many shapes. This term is generally applied to applications which can be accessed through a browser. It is an evolving concept of tasks which must be completed per specification in each market. There is no specific order the tests must be performed in, but some tests have higher importance than others depending on the type of application the test is for. For instance, security will be a large issue for the banking industry, while health systems place reliability and availability high on their list. It is not as complicated as mobile application testing because there is not as much diversity in web application interfaces and the hardware used to access it. It is just as highly important, however, as applications is how customers use your business. A fail in the application is a mark on your company’s reputation.

Take a course at Udemy.com and understand web application testing with Selenium [Read more…]

Mobile Application Testing: Make Sure Your App Goes Through Quality Assurance

mobile app testingMobile applications are cropping up hourly, many still in beta form. You don’t have to look hard to find negative reviews from users crying foul because the app doesn’t work on their phone. The odd logging-out of an app while in use is enough to cause a user to click uninstall and find a competitor app by a competitor company. Yet another update to fix problems which cause other problems, sigh. Can this be avoided? The answer is in testing.

Build a Mobile App for your Small Business in one Hour

Challenges in Mobile Application Testing

There are many challenges in mobile application testing. Computer and web app testing do not work for mobile app testing. There is far more diversity in mobile products which complicates the process.

Device Variation

Device variation is the largest hurdle you will face in developing applications. The many makes and models of smartphones, operating systems and versions of each operating system are a catalog of diversity that all must be tested individually. There are different keyboard types to add further complication. Even hardware, CPU, Memory, OS optimization, and the screen resolution can be different within the same family of products. For instance the Samsung Galaxy has several different sub-names with many different specs. With no standardization, you have to meet all the needs of every user you anticipate will want to download your app.

Mobile Testing Tools

Web application testing tools do not work for mobile applications, neither do desktop application tools. The tools you’ve used to test your website, LinkedIn page, Facebook page, simply focusing on search engine optimization, navigation, hierarchy, none of this is enough with mobile. When developing an app, you have a learning curve of testing and need more workers and tools to accomplish this task.

Take a course at Udemy.com to learn how to test mobile apps

Industry Standards

In order to be popular and globally accepted, the testing of mobile applications must meet industry standards. Conventions of use have already taken hold, and fighting against the system users have already accepted is a losing battle. If users have to completely relearn how to use your app because it is not like any other app in function, they will uninstall it. If your app takes too much space on their phone leaving junk files and growing in size, they will find something else that doesn’t.

Skilled Testers

A skilled Quality Assurance (QA) specialist is needed on each quality team for testing, but also to quickly identify bugs in the user interface because UI is critical for mobility. Even if the mobile application is well-tested and fully functional, the look and feel of the application dictates whether users will accept or reject it.

Strategy for Testing

There are many tools to choose from to test mobile apps. We will focus on the device emulator, physical devices, and cloud testing, as well as automated tools. These strategies are not mutually exclusive. You should not employ just one.

Device Emulator

A mobile device emulator displays your app in various interfaces. They usually are free. UI, stress, and performance tests can be done with an emulator. They are relatively easy to manage. Emulators are cost effective and highly recommended. But they are too perfect, they are more simulator driven and do not present real world quirks.

Physical Device Testing

Physical device testing cannot be avoided, as it allows up to 100% of test coverage and it gives the most realistic results view. They have the advantage of having real quirks that users deal with. It’s the difference between a simulator and flying the real plane. This testing is the most expensive, although borrowing devices is an option to try, but it can push your testing back because of waiting list. Airtime and subscription costs cannot be avoided.

Mobile Cloud Testing

Cloud testing allows data to be kept on the internet instead of on a computer or network. The testing is accessed through a browser, where it will be deployed, tested, and managed. Cloud testing is cost effective for the company because it put the cost on the testers who own the devices and pay subscription fees.

Automation Tools

Automation tools allow you to avoid some of the manual work, which can save money. Many tools for automation can be found for purchase.

Types of Testing

Usability Testing

  • Text visibility with each language
  • Navigation between screens
  • Verification of functionality online
  • Verification of functionality offline
  • Feedback from interaction with the system

Learn how to test usability with a course at Udemy.com.

Compatibility Testing

  • Evaluating app for different mobile devices
  • Evaluating app for various OS versions
  • Evaluating app for all screen sizes
  • Evaluating app for all resolutions
  • Verifying if integrations server changes
  • Checking for app isolation with other apps on device

Interface Testing

  • Validation of each screen
  • Validation of each button
  • Validation of each text input
  • Navigation flow with Facebook
  • Navigation flow with bookmarks
  • Navigation flow with review, etc.

Services Testing

  • Checking that mobile app does not act like a server
  • Checking if a service takes too long
  • Checking if a service is used offline
  • Checking if a service goes down and returns malformed responses

Low Level Resource Testing

  • Checks for overuse of memory
  • Checks for not releasing memory
  • Checks for temp files not cleaned
  • Checks for local database growing too big
  • Checks for the app generating junk files

Performance Testing

  • Checks on connection changes from WIFI to 3G/4G
  • Checks on shared image sizes
  • Checks on application response time
  • Checks on code optimization for the CPU cycle
  • Checks on battery consumption
  • Checks on memory leaks
  • Checks that resources like GPS and camera are freed

Operational Testing

  • Checks for back-up of necessary information
  • Checks for save and recovery plan if battery goes down
  • Checks for data lost in app upgrade
  • Checks for app access if the user gets an alarm, call, message, notification, etc.
  • Checks on battery power usage while the app is accessed

Security Testing

  • Tests encryption/decryption techniques used for communication of sensitive data
  • Checks for multi-user support without data interference
  • Checks for access to files saved in the app by unintended users
  • Detects areas in tested application to block malicious content

Bottom Line

Testing of mobile apps is of high importance for the enjoyment and safety of the user. A bug- ridden application not only downgrades the image of the application in the mind of the user, but also can affect the image of the business. Testing is a cost that can’t be cut from the budget.