Layout as a problem
At design point of view, any web site needs some sort of layout. It’s a mandatory Web Development aspect for even very basic HTML content like landing pages. Modern web picture have to be splitted into logical parts in terms of some structure. The problem is the nature of the web. 30 years ago, when the web was actually invented, a page was treated as pure top-to-bottom flow of a text content and images. That was original layout only. A lot of technologies have been applied since that time. E.g., pure HTML tables, floating div elements. Most of them look like hacks. Keep in mind, there were outstanding features and behaviour of specific browsers and their versions. Yes, I’m talking about dark times of IE6. The situation became even worse because we had to support wide range of mobile devices in responsive way. To solve all these problems there are a lot of grid system implementations available as standalone libraries or complete Web Development frameworks. E.g., Bootstrap [http://getbootstrap.com], Foundation [http://foundation.zurb.com].
Flexbox as a standard solution
Flexbox [https://css-tricks.com/snippets/css/a-guide-to-flexbox/] is not just one more solution, but rather a standard that solve layout problem on basic level. It would be better to have it initially at the beginning of Web Development epoch. W3C is going to add Flexbox to its official standards soon. Technically, it’s not a library but just a set of CSS3 properties to layout DOM elements. There are 3 versions of Flexbox properties set: old, tweener and new.
Any new idea needs rapid prototyping. In case of startup, it is both important to reduce costs and have done current development iteration as soon as possible. Generally, there are tools to help you move this way. Bootstrap [http://getbootstrap.com] is a must-have solution, when we are talking about fast web design and prototyping, but want to avoid wasting our time on standard Usability and UI design.
Apple’s look-and-feel style was dominating in mobile and even web design for a long time. Inspired by Steve Jobs the iOS UI/UX was treated as almost absolute standard. Even some of Android developers and designers were trying to copy iOS practices in their projects. Keep in mind, you should have very important reason to fight a framework. Recently, Google, as main supporter of Android platform, announced Material Design [http://www.google.com/design/spec/material-design/introduction.html] their point of view on both questions Usability and UI design. Besides, Material Design is not just pure theoretical specification. There is new Android 5.0 “Lollipop” version available. It’s based on Material Design. So, you are able to try it live, as well.
Flat, non flat and material
About 10 years ago the web design was pretty huge visually. It had a lot of almost realistic graphics with 3D effects, shadows, gradients, etc. Even small buttons and icons were 3D-like. Later, the web became more productive and useful. For now, it’s not just pure visual set of pages to represent some information. It’s rather applications with thick UI.
In order to get yourself the modern and effective site you have to admit the definite changes take place in the IT world since 2013. This means some ways you tend to use might work no more, so you lose money and time.
To ease your site updates Iflexion team has gathered and carefully studied the latest trends in website development field before offering you the most important ones.
Let’s take a close look at the website development trends 2014.
Landing pages and single page sites
If you look at the usual site you most likely see the complicated structure with the main page containing the general information about the company, several pages with various services, also separate pages for blog, contacts, reviews etc.
This is what you won’t ever see in the landing page. Here all the information is given as shortly as possible. The site contains one single page only with all the data needed to invite the customer and draw his attention to offered services and/or goods.
No one can now be surprised with the wireless connection. It’s even more popular today than the standard wired connection, since people tend to stay mobile and in touch with each other all day long. We can now share not only the data, but also are one step away from the full range voice telephony due to 4G technologies.
What are the current problems of mobile web programming?
First of all, they shall become rather quick, since no one wants to wait till the page loads. The current bandwidth has significantly improved compared to what it had been like. Still there are differences between wired and mobile application usability. Also the demands of current users had become rather high and hard to satisfy. It happened mostly due to the multimedia content shared through the mobile connection.
Each user is now free to choose which network to use: an old one or any kind of the new one. The time of usage is very well important too. Still the bandwidth in wired or wireless network doesn’t differ that much nowadays.
Due to various devices people use in order to get to the network, experts advise to make all portals in 4 different variations suitable for the following devices:
High bandwidth for large screen
- High bandwidth for small screen
- Low bandwidth for large screen
- Low bandwidth for small screen
8 ways to test usability
1. Testing paper prototypes
The paper prototypes let you know just how information will look on the screen of the chosen mobile device without actually using the page… and the real screen. All you have is paper and the removable flexible sheet with data.
The invasion of the internet revolution appeared to be affecting every person in the current generation. Most people can’t imagine their living without the regular usage of the Internet. That is why modern online shopping, games, topics etc. are so popular.
The main role of the website is to allow the user to deal with the daily online business without any special training. Thus the intuitively recognizable interface is really important here. The usual interface is the link between the user and the person running the. The UI designer is intended to help the user in his daily needs. If the site has a good and clear interface it will definitely draw people’s attention and get a lot of traffic. The progressive design will significantly improve the interaction of the users online.
The features of a good UI design:
Nice bold look.
The site shall catch the eye from the very first moment. It shall be really appealing.
Most people crave to get everything in a click time. If it takes much time for the site to load, the user will switch the attention to the other resource. Ensure your site is not a heavy one.
Be sure the user can get the needed information with minimal efforts. Let the impression of your site to be positive.
If you need to create an effective website, you shall think about the usability fro the very beginning. Before developing the site to get to the top of the market or searching for the definite link acquisition you shall be 100% sure the usability is put to maximum.
Here are the areas you shall pay attention to while your UI testing:
• Evaluator role
• Number of website users
• Usability measure
The role of evaluator
Do not allow the “Evaluator effect” to affect the results of the testing. Strengthen the particular areas where evaluators are possible of making mistakes.
Tasks for users
The UI design needs the close attention of the real users, this way you will be sure the mend the real world application. Try to make your UI testing possibly close to what really happens in the particular site.
The actual number of users
Usually it’s enough to launch 5 users to search for any possible problems. Still if the users are all different, they will be handy even is they’re more then five.
Some of the features the UI (User Interface) professionals speak about sometimes look like being too difficult to grasp all their aspects. So keep in mind – the simpler, the better. Decide what you leave and what not, let only the really important features for the users’ attention.
The most important thing for your practice is so called progressive disclosure. Hide the menus and links the user doesn’t currently need. Give the user enough free space to work, and do not offer so many choices the user will get lost in them.
Let’s consider the Dropbox as an example of the good UI design. Here you can find a lot of commands; still the interactive state will have the following look: