Landing pages and social websites thrive on user interaction. It is the grinding mechanism which keeps people visiting your webpage over and over again. How you design an interface can say a lot about how people should maneuver through menus, links, buttons, and other similar page elements. Each solution is different and there certainly isn’t any prominent correct answer.
In this article I want to go over some more popular web design concepts for creating alluring interfaces. You want visitors to be swept away by the design and practically fall in love with your website. A beautiful design coupled with a beneficial experience is what can help your web application or website layout stand apart from the rest.
Relating to the Interface
The key to any enticing interface is to make the user wants to interact with your website. Obviously the primary reason should be their interest in your product or service… you want people registering an account because they actually want to. But it helps to give them a little incentive by designing catchy interfaces which practically sell themselves.
Consider the newer photo sharing startup Pinterest as one example. All of their forms use big readable typography with CSS3 gradients on the buttons and input fields. Also the glowing borders are a nice touch to inform the user which field is currently highlighted. Even more importantly is that all the page elements blend so nicely into the website color scheme. Interacting with forms on Pinterest feels completely natural – as it should be on any website.
Tumblr is another case example where the buttons and input fields have been carefully crafted to blend nicely with the layout. The uniform posting box looks very similar for any type of content including photos, videos, or even plain text. The more you can blend forms into your website, the more relatable they will appear to your visitors.
By creating this natural connection it evokes a sense of safety and commitment. People want to fill out your forms and interact with the page because the elements don’t appear like they’ve all been thrown together at the last minute. Put in some TLC to your website’s form design and I promise it will pay off in the long run.
Design Elements that Pop
Similar to relatable interfaces we also want a design which can practically jump off the page. To phrase this another way, visitors should be able to determine which page elements are interactive and which ones aren’t. You can accomplish this task through all sorts of different methods like border styles and box shadows.
The homepage design for RightSignature is one good example because of their advancing design trends using CSS3. The top navigation and right sidebar areas remain fixed on the page, as they also include the most interactive features. The visitor can scroll through all of this information while simultaneously registering for a new account. Also take note the registration form only requires two simple fields for the username and e-mail address. A lower barrier-to-entry will get a lot more signups because it takes less time and less hassle from the user’s perspective.
I am also a big fan of Dribbble’s layout because of the many design changes which have taken place over the years. Dribbble has always been using a very similar layout style, except the colors and textures have been tweaked ever-so-slightly. You could even incorporate the idea of A/B testing into your website to determine which colors or UI designs would be most appealing to your audience.
Readable Content
It might go without saying, but readability is a huge factor to user interaction. People keep using content-based websites and social networks because of the ability to skim content and quickly recognize its purpose. Consider a homepage dashboard with all the latest news from a user’s feed. How can they quickly determine between a website blog post, a user status update, or a new photo album?
The new micro-blogging platform Medium has grown very popular in a short period of time, especially among tech-lovers and startup enthusiasts. Each blog is made to conform into Medium’s typical layout design which utilizes big typography – nice and easy to read even at a distance from the monitor. This not only makes people want to write more articles, but it also gets readers more willing to stick around and read through a post if the content is easily legible.
A somewhat related yet different circumstance may be found on Etsy. People come on here looking for custom hand-made trinkets or neat little gifts for friends. The product gallery is designed in a way that you can quickly check out what is for sale, how much it costs, who the seller is, and other types of related items for sale. It is one of my favorite growing marketplaces because the design is so eccentric that it immediately catches your attention. Also the products are generally unique and often not sold anywhere else, so it’s a marketplace of rare items with an extremely intuitive process for buyers and sellers.
Points and Profile Badges
Not all websites have the option of creating profile pages for each user. This is typically common amongst social networks and communities which thrive on user-driven content. Applying unique rewards such as badges or points will get people much more interested in using your product. Stack Overflow is one such example where you can earn points by linking to threads, answering questions, or even asking questions of your own.
Another great example can be found on the Github profile pages. Here you can see every repository created by a certain user, along with their work done in other people’s repositories. You can also find stats like their follower count and the total number of starred repos. Point systems work best if you build them on top of the existing website functionality. It is a motivator which gets people pushing to contribute more content and grow their profile on your website.
Uniform Layouts
One final piece of advice for improving user interaction is to get all your pages designed in the same fashion. Uniformity is very important as I outlined in the first section of this article. As people use your website more frequently they become accustomed to the interface. A uniform design helps people grow to expect certain interfaces to behave in a certain way, and people will gradually learn all the little tricks of how your website works.
Possibly one of the largest case study examples would be on Reddit. This social news community allows people to register an account and submit, vote, or comment on news stories. It has scaled tremendously over just a few years as subreddits have grown proportional to the userbase. As more people get comfortable with how the system works, it becomes easier for them to engage deeper into the website and contribute even more content. Think about this concept for your own website and how you might implement uniform design techniques to improve the overall user experience.
Closing
These are just some examples of design trends you may try in your layouts. I have played with a number of fantastic web applications, and the best ones have always been designed with the user in mind. Focus on the end user and consider if your webpage is optimized for the easiest frontend performance. Additionally if you have similar ideas or suggestions on usable interfaces feel free to share with us in the post discussion thread.
Source: http://designm.ag/ui-design/web-design-concepts-enticing-ui/
No comments:
Post a Comment