Pages

Subscribe:

Ads 468x60px

Labels

Labels

Unordered List

Ordered List

Saturday, 7 November 2015

Comics of the week #312

Every week we feature a set of comics created exclusively for WDD.

The content revolves around web design, blogging and funny situations that we encounter in our daily lives as designers.

These great cartoons are created by Jerry King, an award-winning cartoonist who’s one of the most published, prolific and versatile cartoonists in the world today.

So for a few moments, take a break from your daily routine, have a laugh and enjoy these funny cartoons.

Feel free to leave your comments and suggestions below as well as any related stories of your own…

Canine botany

 

In other words

 

There they are!

Can you relate to these situations? Please share your funny stories and comments below…

50 Hip Notebook Mockups in Varying Angles – only $17!

Source

si pide pass es: Jerry King

Friday, 6 November 2015

How to perfect first-time UX in apps

Somehow, we’ve come to accept the notion that digital technology is the answer to all of life’s problems. That conclusion has resulted in more and more app ideas, which are uploaded to the web, and to stores, everyday.

But there are dozens of options for consumers, which makes it difficult for potential customers to find your product. What’s worse, your potential customer probably already has an app that solves the problem you’re tackling; many people never download apps, because they already have what they need—why keep trying solutions if they already have a solution?

If your marketing is strong, and your proposition is sound, they might give you a chance. But this opportunity could be briefer than you think, if the opening screens of your app or service present a problem, they’ll abandon you. You won’t get a second chance.

So it’s imperative that you put your best foot forward, and focus on UX from the start. 

Sign up and login

There are very, very few apps or services where the prospective customer has arrived already decided to sign up and hand over their personal information, no matter how little time or effort it may take. Perhaps this is the case for Facebook, or Twitter, or other indispensable apps we use everyday — the first apps you download when you buy a new phone.

The bad news is: your app is not going to be one of them.

A sign up form as an initial screen is the first thing that is going to make the user think twice about whether it’s worth handing out their personal information (yet again) to an app provider they don’t know. Trust is a scarce commodity these days. And we’re not even talking about what happens if the form has too many fields, or special requirements that weren’t properly communicated beforehand.

Airbnb allows basic use of the app without signing up (left), only asking you to log in to use some of the sections (right).

If we’re honest, there are very few apps that really need you to sign up to use them. We want people to sign up, but it’s not necessary. The ones that need you to sign up are the ones that are pointless without an account. For example, ones that need you to create a profile to connect with fellow members and enrich your experience, or those that need to sync data among devices.

You can test drive Wallapop (left), and it shows you the Login and Signup screen only when it really needs it to continue, in this case, after taping on “Chat” (right).

If at all possible, consider deferring the sign up until it is unavoidable in order to continue. Some apps offer basic functionality limited to an essential set of features that is effectively a test drive.

If the potential user is satisfied with the initial experience, and can clearly see the value that they’ll get from signing up, it’s more likely that they’ll do so. My recommendation is to delay the sign up process as long as you can.

Walkthroughs and other welcome screens

When someone finally visits, or downloads your app, they already have some information about it. If they made this decision it’s because they read a review on a blog, or someone recommended it to them, for example. It may be that they ran into your app by chance when searching for a different solution. However even in this last case, before downloading, or using it, they took a look at the description, possibly reviews, maybe some screenshots.

Your users already know what your application is about. You don’t need to remind them by forcing them to swipe through introductory screens.

They already know the basics of your app, they don’t need this information again in the form of explanations and feature highlights. They know what it does, they want to see it in action for themselves.

Spotify explains about the app, but giving the option to log in or sign up right away, without making you go swipe through tedious instructions.

In the real world, when you buy a new TV, do you read the manual before using it? I bet you don’t. I don’t either. You plug it in, turn it on, and start pressing buttons on the remote.

Walkthroughs are the digital equivalent of a user manual, but in some cases we are forced to go through the manual pages, all of them, before we’re allowed to use the product. I once listened to someone who was part of a development team say something like: “It’s not really important if the user doesn’t understand how to use this, we’ll put an explanation in the walkthrough”!

A good product doesn’t need instructions. Walkthroughs are for lazy designers that didn’t take the time to figure out a good way to do something. It’s pointless to use this tour to explain basic usage, or the meaning of specific elements such as buttons or icons.

Chances are that with the anxiety of reaching the “first screen” users won’t even pay attention to what you are saying, and skip through quickly without even reading your helpfully written instructions. Even if they do read, by the time they come to the app itself they’ll have forgotten what you wrote.

Flipboard shows contextual help, so it tells you how to use a particular element right in context, when you really need it.

Instead of using walkthroughs, I would advise you to use contextual help, at the moment when the user really needs it. In that way, you will ensure that what you are explaining is more relevant and effective. To do this, you can fragment or split the information that you consider essential, and spread it across different screens during the first uses of your app.

Don’t underestimate users that want to explore, and learn how to use your app by themselves. Curiosity is something that you could benefit from if you want to. Some users even want to make mistakes, and figure out by themselves how everything works.

Asking for permission

The same sense of time and opportunity that I’ve been referring to above also applies to when you want to ask a user for permission to show notifications, access to their contacts, or their location, for example. This situation is even worse if you need the user to grant more than one of those permissions. We could risk scaring an unprepared user that doesn’t really understand why your app needs these things.

Facebook Messenger prepares the user, showing an explanatory screen (left) prior to the one actually asking for permission (right), to guide the user on what to do.

In those cases, instead of asking for permission in a dramatic way and all at once, you can ask them in the moment when you are really going to need it.

You can also set this crucial moment by adding an extra, previous screen explaining what is about to happen. This has to be concisely and clearly explained in terms that benefit not just you, but the user too — so that the user understands the value of accepting.

Conclusion

Many of our mistakes, when a potential user is trying out an app or service for the first time, boil down to placing obstacles in their way. Users almost always just want to take our app for a spin. This is often caused by our anxiety about business goals or improved metrics, when what we should be concerned with is the user’s needs.

So fragmenting information and disclosing it in a gradual manner at an appropriate time, are keys to an effective initial experience that, hopefully, the prospective user will choose to repeat.

299 Vintage Style Photos, Textures and Presentation Mock-Ups – only $9!

Source

si pide pass es: Javier Cuello

Thursday, 5 November 2015

Free download: 100 best picjumbo images

When Viktor Hanáček started designing for the Web, he struggled to find good stock images, so he started using his own photos. They were so popular that he started his own site. Two years later Viktor’s site, picjumbo, gets over 1.5 million views every month.

On picjumbo you’ll find landscapes, technology, food shots, fashion, business, and more. And any time you find an image you like, you can try the test drive feature to preview different ways that you could use it.

What makes picjumbo rare, is that its images are free for use in templates and themes, making it an invaluable resource for template developers.

You can download images from picjumbo for free, but you have to download images one at a time which is incredibly time consuming, so we’re delighted that picjumbo has given us an exclusive pack of the 100 best photos from the site for WebdesignerDepot readers to download as a single package.

Download the 100 best picjumbo images beneath the preview, all free for personal and commercial use:

Please enter your email address below and click the download button. The download link will be sent to you by email, or if you have already subscribed, the download will begin immediately.

LAST DAY: 500+ Premium Quality Vectors from Noka Studio – only $17!

Source

si pide pass es: WebdesignerDepot Staff

How to design the perfect contact page

The contact page of a website can make or break conversions. If your visitor has had a good experience up until the point of visiting the contact page (would they still be on your site if they hadn’t?) and the contact page fails to generate that final “click”, a potential customer is gone, quite possibly forever.

It’s imperative that you encourage users to take that final step from casually interested, to fully engaged with your, or your client’s, company. An effective contact page will not only assist the visitor in bridging the gap, but may well be the final proof of quality they need to persuade them to do so.

Creating an effective contact page

Creating an effective contact page is a key process for most sites, here are 9 elements to focus on, to ensure that the “send” button doesn’t sit idle:

1) Limit the number of required fields

The more information you ask for from a user, the less likely they are to complete a contact form. Only ever ask for the information you absolutely need.

2) Place a bounding box around forms

By placing a bounding box around forms you make them easy to identify at a glance, and help users gauge what parts of the page are interactive.

3) Embed Google maps

For bricks-and-mortar businesses, helping users find the location is obviously beneficial. Even for online businesses, displaying a physical location adds credibility.

4) Add social proof

Speaking of credibility, add elements that will give customers confidence, such as testimonials, BBB emblems, the number of years you’ve been in business, and so on.

5) Add branding

It might sound foolish, but most potential customers are browsing numerous sites, often in multiple tabs. It pays to remind them exactly who they’re about to contact.

6) Guide user input

Use UI elements like selects, and option fields, to guide user input. The easier it is to give you the information you want, the more likely it is you’ll get it.

7) Keep it simple

Simple always wins, especially on mobile. Remember that on mobile, your form may need to be larger in order to be usable.

8) Include your phone number

Many businesses don’t want to include a phone number because they think they’ll be fielding calls all day. The reality is a phone number is like Google maps, it gives you credibility and makes the customer feel safe handing over their personal details.

9) Add a privacy statement

Add the guarantee that your company will keep users’ details confidential. This builds trust.

Grain and Mortar

  • The Human Test is easy, but keeps out spam. When spam tests are difficult to decipher, users get frustrated and click off.
  • Putting the FAQs on the page saves users time and results in higher quality inquiries.
  • Only three required fields — it can’t get much simpler.
  • The overall simplicity of design, with over-sized fields for mobile UX, is generally pleasant to view and work with.

Evoke

  • This design is non-traditional, made to look like a postcard. Because the design is also simple and has a bit of fun woven into it, user interest is heightened.
  • The bounding box around the inquiry form makes it stand out from the rest of the page.
  • The color scheme, logo and credibility elements in the footer (associations) combine for a strong presentation of branding. This contact page definitely has its own character, gourmet yet down to earth. The form should resonate with people looking for these qualities.

Shiner

  • Strong borders around the form fields make it impossible for users to get confused.
  • Again, we see a small number of over-sized form fields.
  • The design has a bit of old world, traditional flavor — no doubt exactly how their beer tastes. Brand consistency makes visitors thirsty!
  • The large Google Maps embed is a nice convenience for users, lessening the need to enlarge or reduce it.

Knowing the business + knowing the customer = great contact page

Notice that all of these examples are effective, but use different design techniques. Crafting an effective design page requires an understanding of the brand, what potential customers want to know, and the key website user influencers.

Universally, website users want simplicity, so it’s not surprising that all of these featured contact pages ooze “easy”. However, insight, imagination and a unique approach are needed to create, strengthen or sustain brand interest when users hit the contact page.

LAST DAY: 500+ Premium Quality Vectors from Noka Studio – only $17!

Source

si pide pass es: Brad Shorr

Wednesday, 4 November 2015

Interview: Adobe’s Andrew Shorten discusses Project Comet

The big news at this year’s Adobe MAX conference was the announcement of Project Comet, Adobe’s new UX design tool. With just a few months until we expect to see a public release of the groundbreaking app, we sat down with Andrew Shorten—a Director of Project Management at Adobe, and integral member of the Project Comet team—to ask him what we can expect.

What is Project Comet?

WebdesignerDepot: Project Comet was announced at this year’s MAX, was it scary for the team demoing a new application live, and did you expect the response you got?

Andrew Shorten: Yes ­unveiling a completely new project at MAX is a little daunting, but we were excited to finally be able to talk about it publicly. We were hoping for a good response based on the feedback that we’d received from designers during the early stages of design and development, but we have been overwhelmed by the level of interest in Project Comet from both UI and UX designers. We really appreciate that so many designers have signed up for more information on Project Comet on our site ​and look forward to providing updates on our progress over the coming weeks and months.

WDD: Comet is a UX design tool, but is it a desktop app, a mobile app, or a service?

AS: Project Comet is initially a desktop app for Mac OS, combined with a Creative Cloud service that enables prototypes to be shared easily. We’re going to be delivering Project Comet iteratively, adding companion mobile apps and also desktop support on Windows 10 in time.

WDD: So Comet is initially Mac-only; how long will Windows users have to wait to use it?

We absolutely intend to bring Project Comet to Windows 10…but aren’t committing to a date for release at this point.

AS: We’re focused on delivering a great product on Mac OS right now. We absolutely intend to bring Project Comet to Windows 10 and have begun some of the work to make that happen, but aren’t committing to a date for release at this point.

WDD: Will Windows users be able to access the service, and review the prototypes their Mac-based colleagues produce with Comet?

AS: Yes, prototypes will be accessible via a URL and will work in modern browsers on a range of desktop and mobile devices.

WDD: When you started to build Comet, were you building a tool for UX designers, or a tool for UI designers who needed to incorporate UX?

AS: Both.­ When working with UX designers we saw significant friction in the design and prototyping workflow that negatively impacted their ability to iteratively learn and incorporate design changes. We also discovered a large number of UI designers that wanted to extend their scope to incorporate more aspects of UX design, but found the array of different tools and approaches overwhelming.

How does Comet help us design for UX?

WebdesignerDepot: There’s a lot of debate in the industry about what “UX” actually means, how does Adobe’s Comet team define it?

Andrew Shorten: We don’t want to be prescriptive in terms of how we define “UX”, but rather support designers who are focused on designing great user experiences for web, mobile and the ever ­increasing set of connected devices. As part of figuring out how we can help UX designers, we focused our attention on wireframing, visual design and prototyping, in relation to crafting and then refining the user experience based on stakeholder feedback and insights from testing prototypes with customers.

WDD: So designing Comet has been as much about pioneering UX workflows, as it has been building a UX app?

great tooling can play a part in broadening the adoption of UX principles

AS: We certainly think that great tooling can play a part in broadening the adoption of UX principles.

WDD: Comet designs for websites and apps; does Adobe make a distinction between the two?

AS: We believe there are a foundational set of design, layout and prototyping features that are applicable to both websites and apps; that said, there are also differences which surface due to the varying capabilities, technologies and design best­ practices for web and mobile. Depending on whether you are designing for web or mobile, Project Comet will provide the right set of capabilities to help you design and prototype for that target platform.

WDD: What sets Comet apart from other prototyping apps that are currently available?

AS: The combination of visual design and prototyping in a single tool really sets Project Comet apart from anything else available;­ we’ve brought these together to address the pain points that exist when creating and iterating on prototypes. Being a part of Creative Cloud is also a big factor: ­you’ll be able to bring in design assets from other Adobe tools, incorporate UI elements and stock images and share prototypes through Creative Cloud without ever leaving Project Comet.

How does Comet integrate with Creative Cloud?

WebdesignerDepot: How closely does Comet integrate with Photoshop and Illustrator; will it have access to shared libraries, or embed assets as smart objects, for example?

Andrew Shorten: We want to make it easy to bring assets created in Photoshop and Illustrator into Project Comet ­using established workflows such as copy/paste as well as supporting the newer collaborative workflows enabled by Creative Cloud libraries. We also want to keep Project Comet really focused and so rather than replicate features from Photoshop and Illustrator, we’ll make it easy to take elements in Comet and edit them directly in the corresponding tool depending on whether it is bitmap or vector based.

WDD: Will Comet supplement the work we currently do in Photoshop and Illustrator, or might it replace them altogether for UI work?

AS: We expect that Project Comet will contain the majority of tools that a UX designer will need to undertake wireframing, visual design and prototyping for web and mobile apps. As Creative Cloud members, you’ll still have access to Photoshop and Illustrator, to use as part of the workflow if needed.

WDD: There’s been a lot of speculation that Comet is Adobe’s “response” to Sketch; does that view hold water?

AS: Rather than position Project Comet as a specific response to Sketch, I’d say it’s our response to the evolving needs of designers who are faced with increasing demands to create holistic experiences that span an ever­ increasing set of screens and devices. That has resulted in us focusing on a new tool that is built from the ground up to perform extremely fast, that contains innovative new features such as repeat grid that remove arduous steps and enable more time to spent on design exploration, and that brings together design and prototyping capabilities so as to reduce friction when iterating on designs.

WDD: Will Comet be included in Creative Cloud subscriptions, or will there be an additional cost?

Project Comet will be included in Creative Cloud subscriptions…During the public preview Project Comet will be available free

AS: Yes, ultimately Project Comet will be included in Creative Cloud subscriptions for individuals, teams and enterprises. During the public preview Project Comet will be available free to anyone who has or signs up for an Adobe ID.

WDD: How long until we get to try the public preview for ourselves?

AS: We are working hard on the public preview release right now and want to make it available as soon as we can. We also want to make sure though that it has the right set of features so that it can be used on a real design project from the outset. We’re targeting “early 2016” for that first release,­ to keep up to date on our progress and be informed when we have the public preview available you can sign up at adobe.ly/comet.

 

What’s next for Project Comet?

WebdesignerDepot: The repeat grid feature of Comet was literally jaw-dropping when I first saw it; are there any plans to port it to other Adobe products?

Andrew Shorten: Our teams are constantly sharing new ideas and features with other product teams to see if there is an opportunity to expose a feature in a broader set of tools. We are actively discussing bringing the repeat grid feature to other Adobe products ­exactly how and when it shows up in other tools is to be determined though.

WDD: Comet will feature plugins to extend the app’s capabilities; in what language will those plugins be authored?

AS: We will be providing an extensibility model and API that supports the development of plugins written in JavaScript.

WDD: Will Adobe be hosting a store for Comet plugins? Will there be an extension manager like Brackets?

AS: We’ve learnt a lot from the extensibility model with Brackets and will draw upon our experiences there when designing the solution for Project Comet. We are still working on the specifics though, so don’t have more information to share at this point.

WDD: Photoshop celebrated its 25th birthday this year; do you hope Comet will have the same kind of longevity?

AS: We are at the start of our journey with Project Comet and certainly aspire to have the success and longevity that Photoshop has!

 

Thanks to Andrew for taking the time to answer our questions.

200+ Apple Responsive Devices Mockups Bundle – only $17!

Source

si pide pass es: Benjie Moss

Tuesday, 3 November 2015

Twitter tweaks its UI and destroys its UX

Last month, when Twitter CEO Jack Dorsey moved into his new office and set about broadening the platform’s appeal, little can he have anticipated the twitterstorm he would unleash with one tiny tweak.

In updates that are rolling out across the company’s apps, Twitter has replaced its ‘star’ icon with a ‘heart’; additionally the feature will now be known as ‘likes’ instead of ‘favourites’.

The change appeared to make perfect sense: a ‘star’ indicates a value judgement; a ‘heart’ indicates liking, or loving.

You might like a lot of things, but not everything can be your favorite…the heart, in contrast, is a universal symbol that resonates across languages, cultures, and time zones. The heart is more expressive, enabling you to convey a range of emotions and easily connect with people. And in our tests, we found that people loved it. — Akarshan Kumar, Twitter

The problem for Twitter is that that’s not how Twitter users have been using the feature. The ‘star’ may indicate a like, but more often it’s used to bookmark a tweet — if you like it, you retweet it.

Twitter has always developed based on usage — the hashtag was a user invention that the social network adopted. But now it appears that declining growth has persuaded the platform to actually think strategically, and they prefer to court new users than appease existing ones.

Whilst some power users were unfazed:

Many more were predictably melodramatic:

Fortunately, for those who simply can’t live with the change, Wired have provided a helpful guide on reverting to the star icon.

 

 

Featured image, Anthony Correia / Shutterstock.com

Mega Bundle: 14 Font Families from TypeFaith – only $24!

Source

si pide pass es: Benjie Moss

What Netflix’s rebrand teaches us about responsive design

Last week, streaming media service Netflix unveiled its new identity. Designed by New York-based agency Gretel the rebrand aims to unify the company’s output across the 50 countries in which it now operates.

Our challenge was to…create something variable yet systematic and bulletproof. It had to be visually striking, adapt to any format, and hold up to interpretation by agencies and vendors around the globe. — Gretel

The resulting design, owes a debt to card-based web design. Dubbed “The Stack”, the design features 3 cards: an image card, a color card (usually Netflix red), and a text card. The Stack is designed as a metaphor for infinite selection, and user curation.

Using the system, individual designers can select the elements they need, dialing up or down the emphasis as needed. The amount of Netflix branding included for example, is being termed by the team the “brand volume”.

What’s fascinating about Netflix’s rebrand is the way it embraces, and refines responsive design; this is responsive design beyond viewports, it’s responsive design for mobile, the web, print, social media, and of course TV.

Netflix subscribers will know that Netflix allows you to switch devices seamlessly — it is not uncommon to watch a show on your mobile whilst commuting, switch to your TV when you get home, then switch to your tablet to watch the next episode in bed. We know from studies such as Google’s 2012 Multi-screen study that users browse the web in a similar fashion, switching devices based not on task, but on their context.

Gretel’s rebrand of Netflix gives us a glimpse of how we can design for that kind of user experience:

Really it translates across all parts of branding: Language behavior. Type behavior. Motion behavior. We’re trying to create things that can speak and have signature behaviors across any medium. — Greg Hahn, Gretel

It’s no accident that the identity is a flexible system that would translate easily to a user interface — the hope is that the new brand will ultimately form the basis of Netflix’s varied UIs at some stage in the future.

Visually, the most interesting part of the design approach is the cropped logo. Many logos are used as design elements, often being cropped accordingly. The Netflix design takes the approach to the extreme and demonstrates that design assets can be heavily cropped and still retain brand integrity.

What this means for web designers is that the eternal struggle to squeeze brand assets onto mobile screens may well be unnecessary. As the Netflix rebrand shows, if the ingredients are distinct enough, we only need a glimpse of the brand to enjoy its full flavor.


Mega Bundle: 14 Font Families from TypeFaith – only $24!

Source

si pide pass es: Benjie Moss