In March of this year, we opened our first East Coast office in Atlanta. Some of our Bay Area employees moved out to Atlanta to help to open the office and begin a new adventure in their careers. One of …
The post Getting to know UserTesting: Meet Jake Bieber appeared first on UserTesting Blog.
from UserTesting Blog https://www.usertesting.com/blog/2016/09/28/getting-to-know-usertesting-meet-jake-bieber/
If you sit down with any website design and development team, you might discover that breadcrumb navigation isn’t their favourite experience. Most may even consider it a hassle that’s not worth it, meaning it’s often an overlooked factor in site usability.
But the fact is, breadcrumb navigation helps to increase site usability as opposed to degrading its value. It is one of the more popular methods of alternative navigation, allowing website users to recognize their hierarchy while reducing the number of steps required to reach a higher-level within the site.
But, first things first.
Breadcrumb navigation is a set of contextual links that ease the navigation of a website. These links also present an SEO opportunity to make your site more search engine friendly. There are three different types of breadcrumb navigation. We have outlined each of them to help you understand breadcrumbs a little better.
Location based breadcrumbs inform the user where their current page stands in the hierarchy of a website. This means that users can easily see (and access) a broader category, considered as a higher-level page, from the current page. To elaborate, a certain product page would be considered as a lower-level page in the website hierarchy, the sub-category it’s under is slightly higher level, and the main category is a much higher level. You will find these type of breadcrumbs visible in websites where there are at least two levels of content. They begin with a link to the home page and end with the user’s current page.
The benefit of these location based breadcrumbs is that they encourage more browsing experiences and considerably reduce the bounce rate. Say, for example, an ecommerce website user lands on a product page. If the product isn’t up to the mark, they will look for more items for comparison or they might look for different items to purchase. A user can use the breadcrumb links to navigate effortlessly and view more options. With this in mind, location based breadcrumbs can improve site usability and promote content accessibility.
Take a look at this example from Best Buy. From the home page, you get to ‘cameras and camcorders’, and then ‘digital camera accessories’. There are several further levels and finally, you have the product page.
Also known as ‘history trail’, these breadcrumbs enable users to see the path they have taken to arrive at a given page. This means visitors can easily jump back to a previous page they have visited without losing track. You will find that this type of link is generated dynamically. Usability professionals do not recommend path based breadcrumbs for a number of reasons such as –
Here’s an example of path based breadcrumbs to help you understand clearly:
Contact Us > About Us > Careers > Flipkart Stories > Press > Sell on Flipkart
Due to the various risks involved in using this type of breadcrumb, you actually won’t see a lot of websites using them anymore.
Attribute based breadcrumbs are most commonly found in ecommerce sites. They display the meta information of a certain page, which means visitors can see the different attributes or categories assigned to a certain page. A product may be listed under a certain category but it can be categorized under multiple other categories as well. For example, a car may be categorized as vintage, but it can also have different attributes such as being released in the 1960s, being a convertible, or being the color red.
Attribute based breadcrumb navigation doesn’t necessarily take you back to the path you have taken nor does it display the hierarchy of the website. Like the path based navigation, it also has issues with duplicate content delivery to search engines, but a highly qualified SEO expert can always prevent this from happening.
Here’s an example from Flipkart where you select a certain product and automatically see all the categories and attributes it may be listed under, such as “Books”, “Short Stories”, “Fiction and Non-Fiction”, “Literature and Fiction” etc. So the product page of the book itself is accessible via multiple paths.
Breadcrumbs can provide additional means through which website users can easily navigate. If a user lands on the internal page of a website via another breadcrumb they can see where they rank as per website hierarchy. Users also have the opportunity to move between different pages without any hassle.
Location based breadcrumbs not only support better browsing but also improve search function. The location based breadcrumbs can be seen in search listings, offering multiple ways for users to navigate through a website. See this example from Nordstrom and the results that show up when conducting a Google search for stilettos with the brand name.
It’s not just about usability; breadcrumb navigation can also be responsible for making your website visually pleasing. Plus, it can do so without consuming too much space on your page. An aesthetically-pleasing website design often translates to better user experience. So not only will you find that breadcrumbs are easy to implement, they fit seamlessly into the design of your website and provide great benefit to your user. See how Jabong achieves this below.
Breadcrumb navigation provides a more detailed method of navigating a website. In doing so, users will come across more options of how to reach other pages without getting lost. They have the opportunity to easily go back a number of levels within the site, preventing them from leaving because they’re confused with the navigation or are unable to find something. This means breadcrumb navigation can lower the bounce rate of your website significantly.
This simplified explanation of breadcrumb navigation should be able to help you understand it better and how it can be implemented to improve your site usability. Got any insights to share or any questions to ask? Feel free to leave a comment below.
The post Breadcrumb Navigation: Good for Website Usability or Not? appeared first on Usabilla Blog.
from Usabilla Blog http://blog.usabilla.com/breadcrumb-navigation-good-website-usability-not/
The future of the business landscape evolves around technology and its advancements. With rapid changes in the field, businesses have become increasingly dynamic, contextual and personalized. Their design and branding are being altered to reflect the changes taking place. More and more companies are aligning their brand strategy with customer experience to determine services and products to launch and tune the way they will work and interact to the finest detail.
Today there is a huge debate on the quality of UX education and the level of preparation of UX professionals for real life design quests. However, we all know that the problems the UX sector is facing right now are the result of its rapid popularity and the speed at which the business-technology canvas is changing today.
Having human emotions at heart and striving to create positive user outcomes, UX design at its core is all about creating valuable human-technology relationships. Today it represents a complex combination of user research, insights, business strategy, branding and creative problem-solving. Unlike what we have been accustomed to so far, there is an increased requirement for UX practitioners to embrace the business and design interplay in their works.
UX designers need to be able to articulate each business case they are designing for so as to be able to understand the language of business insights and fuse it with user needs to produce great experiences. Here comes the challenge: due to the broad understanding of UX, which is still confusing for many, the coupling of customer and business value in UX design is very often unbalanced.
For this reason, UX professionals often struggle to communicate the business perspective of their unique value proposition and business relevance of their design choices.
So, what can be done about it?
UX design exists at the junction of multiple disciplines. It serves as a facilitator between businesses and customers, bridging their interests through technology. This ability to serve is impossible without deep understanding of the strategic role of experience and specific business challenges it solves.
The role of UX designers is to learn as much as possible about the business context and objectives to be able to identify primary problems and ways to respond to them. UXers have to view the business background of a project as a fundamental part of their design work and to keep in mind that the final creative outcomes need to bring business value.
Communication is one of the most important ingredients in the day-to-day activities of UX professionals. Working on projects, they should be able to clearly articulate their design choices, provide a concise and clear explanation of their work and efficiently interact with multiple team players.
UXers need to take a more proactive approach on learning the language of business people. Asking for business mentorship is one of the great ways for them to get business perspectives and insights on how to better translate abstract concepts of design and technology into more easily understood subjects for stakeholders and clients.
User Experience is not simply a set of techniques and methodologies about designing for customers, but a strategic thinking about customer behaviors, desires, and expectations. It gives additional perspective that go beyond simple design skills for making decisions and solving problems for customers. User experience builds the foundation of a company’s customer strategy to achieve a differentiating level against competitors.
Still, it has to be aligned with short and long-term business goals to create a cohesive user experience across all possible touchpoints and products, and get measurable results. UX strategy integrated with business strategy creates the direction and the framework for achieving business goals in a user friendly way and connecting with customers on a deep and meaningful level.
Everyone within an organization, whether it is someone from the UX, marketing, branding or product design team, has the the same goal: to ensure superior customer experience with visible results, increased customer acquisition and retention rates. That being said, very often these camps work in silos, putting up an array of disjoint experiences.
In order to create a coherent digital ecosystem of user experience for a business, cross-functional teams have to work together, share knowledge and provide insights from different directions. For UX teams it is essential to collaborate with other departments from the early stages of the design projects. This serves to understand the strategies behind positioning and advancing products and/or services over time while exploring the implications and interdependencies between brand-differentiated value and experience.
Situational awareness is one powerful skill anyone could master. As the name implies, it is simply knowing what is going on around you. For UX designers, situational awareness is a valuable asset if they want to enhance credibility of their work and professional judgement within the business context. UX designers need to have adaptability to quickly read and understand the business of a company while navigating and operating within its constraints.
Cultivating a situational awareness mindset in UX design helps read situations, understand the bottom lines and see the “big picture” of the business ecosystem. And these insights help to balance user needs with business needs to create efficient UX.
In order to connect creative aspiration and business feasibility in UX design and bridge the gap that still divides design thinking and business thinking, UX professionals should be proactive in exploring business contexts and inter-dependencies between user needs and business goals.
Instead of relying entirely on UX language, they need to adopt business communication skills (the soft skills) to be able to navigate the dynamics of a design project in the framework of a particular business system and translate design concepts into the metrics and indicators familiar to clients or stakeholders.
(Lead image source: StartupStockPhotos – Creative Commons)
from UsabilityGeek http://usabilitygeek.com/business-savvy-ux-design-improving-business-acumen-designers/
Video games have to balance UX with visual design for an addictive and fun user experience.
Successful video games have certain commonalities — a simple and engaging world that focuses on getting the player completely immersed into the gameplay and easily understand how to succeed.
Such lessons are relevant to the field of user experience.
Here are a collection of helpful lessons gleaned from the gameplay systems.
“Good UX is the consequence of fulfilling the needs for autonomy, competency, stimulation, relatedness and popularity”
— Marc Hassenzahl
Game design systems aid play’s engagement and interaction by providing appropriate incentives in part with the right level of challenge, rules and goals which creates a journey for a player to begin.
Common examples of establishing a similar system of rules and achievements are rewards systems for certain behavior.
For example, in Bing rewards, points are earned for web searches, mobile usage and completing daily quizzes.
Loyalty programs such as Target’s REDperks program follows a similar system.
This mobile rewards programs uses lessons from gamification to progress toward the following:
Target’s rewards program bolsters its omnichannel strategy. Because the pilot rewards program is based on in-store purchases only, customers are engaging with Target across the physical and digital realms. Leveraging Target’s physical presence also gives it a significant advantage over e-commerce pureplays that cannot provide shoppers with the in-store shopping experience they are familiar with.
The company can drive up store visits with its rewards program. Giving consumers a monetary incentive to return to a Target location will likely drive up in-store foot traffic for the mass merchant. Driving shoppers to Target locations will not only provide a lift in traffic, but also in incremental spending as shoppers browse through the store.
— Business Insider on the REDperks program
Other gameplay elements such as badging, which are simply a visualization of progress, can give players a sense of their own progression and investment, all of which add to long term engagement.
Learning in successful games start with combining gameplay and learning rather than using a lengthy tutorial or video.
The focus should be on progressive disclosure of new things to learn. And placing a few key goals to achieve in front of the user is a good guiding principle. Placing twenty new prompts may not be the right thing on a start page as overly dense and perceived difficulty may turn the user away from even starting your product.
A common UX pitfall is overwhelming a user with clutter, whether that be wordy messages, visually heavy pages or lack of contrast and hierarchy — the concept behind easy learning is teaching the user how to be successful in the most simple and understandable way.
The idea of adjusting difficulty based on user’s choice is frequent in games. Modes for beginners, intermediate and advanced players indicates that players come into the game with different context, motivations and skill levels.
From a UX perspective, this can be more subtle.
For example, allowing “skip” actions for tutorials and beginning walkthroughs can allow users who are familiar with the system to achieve their goals sooner.
The pace or frequency of help, tips and reminders can allow buffer space for beginner level users.
One interesting aspect successful video games that should make UX designers take note is how immersive and cohesive the storyline and “world” created by the final game.
From start to finish, the player is dropped into a fully fleshed out world with a unique aesthetic that touches the interface, voice and interactions the player has within the world.
For UX designers, the lesson can be this — strong visual design and branding matter. Pushing their boundaries can increase usage, brand recognition, loyalty and engagement.
Last but not least, the reason why so many people can spent countless hours on games but give up when an application is frustrating comes down to an element of fun.
Games aim to entertain and practically speaking, not all products can achieve this, simply because it’s uncharacteristic or inappropriate for their functionality.
“UX design is about removing problems from the user. Game design is about giving problems to the user.”
— Raph Koster, Game design vs UX design
Nevertheless, I find that by studying the success of video game mechanics, and use of learning to achieve new goals, one can find an abundance of inspiration to draw from for great UX.
—
from Sidebar http://sidebar.io/out?url=https%3A%2F%2Fuxdesign.cc%2Fwhat-ux-designers-can-learn-from-video-games-87f165289ed1%3Fsource%3Dtags
After sitting down and whiteboarding things out with your product manager and a few engineers, you can’t wait to start cranking away on a new design.
You spend hours designing and tweaking and wholeheartedly believing “Users will love this!”
And then your designs never make it anywhere.
That feeling sucks, but it’s also part of the game. It’s the life of a designer. But throughout my time at RunKeeper and now at Drift, I’ve developed a system to help make sure this doesn’t happen—and to soften the blow when it does.
I call it the 40/40/20 method, and it’s ideal for fast moving teams. It allows you to focus on the now while still looking out at the road ahead, which keeps you from wasting time on things that won’t ever be built.
I started doing things this way because I’ve experienced that scenario described above plenty of times—it’s tough to leave all your hard work on the engineering room floor.
As a designer, I want to explore things fully and understand how things will build upon each other over time. Throw in some “delightful” moments for users to stumble upon.
But as a lone designer catering to 2 product teams, that’s not always feasible. Yes, my designs need to be thoughtful, but I also need to work at a pace that keeps 6 high-performing engineers moving.
Before I started using the 40/40/20 method, I had a process that was (unknowingly) more optimized for keeping our engineers busy rather than allowing us to quickly tackle the most important thing.
Our team would talk about an idea, and I’d go off to design the ideal version of it. Then when I showed it to my team, we’d strip things out one-by-one until the only thing left was a design I could’ve pulled together in an hour.
Bummer.
This left me constantly scrambling—jumping back and forth between teams, trying not to block anyone, and never really getting ahead. I needed to change my process.
“What feels like a trivial addition to you might be a pile of work for someone else.”
First thing I started doing was spending more time with our back-end team so I could understand what endpoints we had at our disposal, what things we could do with a little bit of work, and what things would require a lot of work to implement.
I needed to recognize that what feels like a trivial addition to me, is probably a pile of work for someone else.
After I had all that information, I would still design the ideal… but I broke down the file completely differently into 3 shippable parts:
Here’s a real example with a recent conversation redesign we implemented, and how we broke it up:
Bucketing and designing things this way has worked wonders for a couple of reasons:
I’m only focusing on the “now,” but I can see the road ahead.
The beautiful thing about partially designing out those last 2 buckets is that I can stress test a design and have confidence it’s not going to break without spending too much time. Considering how things will scale helps me avoid designing us into a corner—and it saves us lots of engineering time in the long run.
“Consider how things will scale and avoid designing your team into a corner.”
I’m not wasting time on things we won’t build.
The most obvious benefit is that I’m not spending any extra time in that last 60% unless engineering tells me that we’re going to be ready for it. Usually we get through the second 40%, but not always. Sometimes we get to that last 20%, if we don’t have anything more important come up. In those moments, it’s easy for me to jump back, tie up the loose ends, and go back to whatever next “big thing” I was working on.
The other major advantage to this?
I’m able to work on multiple “big things” at a time.
This last one is huge because as a small team, speed is our advantage. This process allows me to work on major things for both teams intertwined with each other, but the nature of bucketing helps me keep focused on one milestone at a time. And that allows me to deliver more thoughtful work to both of my teams.
Here’s a recent example of this process at Drift:
The other thing I like about this process is it respects the limits on my attention span. I’m most productive before lunch, so I try to divide my day into 4-hour blocks. In the morning I work on my “one big thing,” and in the afternoon I give my attention to “everything else.”
“Everything else” usually means going back to that last 60% on a previous project and documenting a few more days’ worth of work for that other team. Sometimes it means whiteboarding next week’s “big thing” with my PM so he can start planning. Whatever it is , it’s something that needs to get done—but it’s not the most important thing.
As our team grows, developing a process has been more and more important not only for my productivity, but for my sanity. And keeping sane means knowing I’m not throwing away huge chunks of my time on fruitless explorations.
I know this process will need to continually adapt and cater to the ever changing needs of the team. But right now, it’s working.
from InVision Blog http://blog.invisionapp.com/40-40-20-design-process/
19 Sep 2016
I think many of us are not using SVG to its full potential. I often see SVG used as an alternative image format or as a simple solution for icons, and whilst it’s great for these things, it’s also a lot more than that. SVG can solve problems that HTML and CSS alone can’t. It has responsive properties that go beyond vector scaling, such as control over aspect ratio, embedded CSS and a unique co-ordinate system. I rarely see all the features of SVG used together to create unique responsive solutions.
Perhaps the full potential of SVG on the web remains untapped because to get the most out of it, you need care a little more about the mark-up. I’m not advocating writing SVG by hand, but the level of control that most graphics applications give us is not adequate for implementing anything more than basic techniques.
How we overcome this I’m not sure, unlike HTML we need a graphical interface for producing SVG images, but SVG is also a mark-up language, and there are good reasons why we use text editors for HTML. Perhaps SVG will always need both designers and a developers to get the most out of it.
With that in mind, let’s take some things you can do with SVG that you might not have seen, and perhaps not even considered possible.
SVG has a complex positioning and coordinate system that is entirely different from the box model that you are (hopefully) familiar with. To gain a full understanding of it, I recommend reading Sara Soueidan’s excellent articles on Understanding SVG Coordinate Systems and Transformations as well as Amelia Bellamy-Royd’s, How to Scale SVG. I couldn’t match the detail provided in these articles, so I choose not to try.
If you think of SVG like any other image format, to be responsive, it should stretch and scale to fill the available space. You should not be surprised to learn that “Scalable Vector Graphics” are great at this. Amelia’s article demonstrated that, depending on the viewBox and preserveAspectRatio attributes, we can exercise more precise control over how SVG images scale.
Take a look at this example of an ornate border and try to imaging how you might do this with only CSS and HTML.
Dig into the SVG source and you will see we’re taking advantage of symbols, masks, transformations and other goodness that HTML and CSS have only ever dreamt of. It works great, but it is by no means the extent of the responsive capabilities of SVG.
One interesting and little known fact about SVG that is that the viewBox is an optional attribute. Did you also know that you can nest SVG elements and establish a new coordinate system on nested SVG and symbol elements, by applying a new viewBox?
With that in mind, imaging for a minute that this is not an image on the web. How might a traditional artist adapt this design for different sized page? They would probably not just be uniformly scale the design. More likely, the corner flourishes and diamond would remain roughly same size and the length of the line connecting them would be reduced.
We can do this with SVG! Compare this to the prior example, the difference is particularly notable on smaller screens.
This type of responsive design is particularly suited to SVG and with a little understanding of the SVG coordinates system you can break out of the limitations of the box model.
Although the picture element and srcset are now widely supported (with the exception of Internet Explorer), did you know you can create responsive art-directed images using SVG?
Resize your window to see how it works.
You may recognise the image from an influential blog post and example by Eric Portis. Although it looks the same, this example is achieved using only SVG and CSS.
To achieve this technique I’m loading an SVG as the src attribute for an image. The SVG itself has an image element and embedded CSS that resizes and reframes the image using media queries.
The image element inside the SVG, has a base64 encoded dataURI. I’m using a dataURI because when loading external SVG files in an HTML document, such as via:
<image src="image.svg" >,background-image: url('image.svg'),<iframe src="image.svg">, or<object data="image.svg">they will not load additional linked resources. This is perhaps to prevent recursive references or for network performance reasons. Either way, to get around this limitation I’m using a dataURI.
CSS is global, so when embedding SVG in HTML (inline SVG), any CSS in the HTML document can also style SVG elements. Likewise <style> tags embedded in the SVG, when used inline, will not be scoped to the SVG element. They will be treated just like any other <style> tag found in the HTML body, that is, applied globally.
Developers often take advantage of this, using SVG sprites and CSS to change the colour of icons. Some developers complain that they cannot use CSS to style SVG elements that are not used inline.
I agree that this would be handy in some cases, but if you think about it the other way around many people are failing to take advantage of the fact that a referenced SVG (not inline) has its own document context.
Therefore, CSS in referenced SVG files, is scoped. This includes media queries! I can take advantage of that fact to create a responsive image that is aware of its own width and adjusts display accordingly. The size of the page doesn’t matter, it’s responsiveness is relative to the size of the image itself. This works the same for backgrounds and other methods of referencing external SVG.
One disadvantage this technique has over srcset or the picture element is that everything in the SVG will be loaded, there is no opportunity to prioritise loading only required assets first, depending on the user agent.
On the flip side, this technique works anywhere SVG does including in IE and offers the opportunity for customisation beyond just supplying a different source image. For example you could apply different filters for particular image sizes or anything else you can do with CSS and SVG.
Depending on the situation, this technique will not necessarily result in a larger download. So be clever and creative; use this technique where it make sense.
We’ve learnt that media queries in referenced SVG will be bound to the width of the image or element they are used on. This sounds a lot like container queries, one of the most requested browser features over the last few years, and in many ways (although not all), it works now in SVG.
I’ve seen very few examples that take advantage of this, the icon library iconic is one that comes to mind. But I don’t think I’ve seen anyone use it to its full potential yet.
How about something that’s not an icon? Let’s update my ornate border example to resize and even remove the corner flourishes, in response to the available width.
There is no way that I know of to achieve this with just CSS and HTML. Why aren’t we doing much more of this on the web?!
How far can we push this? Pretty far is the answer! But as always, with some caveats and limitations.
Let’s try and reproduce another influential example. Remember Mat Marquis’ article Container Queries: Once More Unto the Breach? Do you think we can do that with SVG?
Note: Sorry I made a change and this demo is a little buggy in Firefox & IE at the moment. I’m working on a fix now.
Now that you are hopefully excited, I’m sorry to say this example is intended to demonstrate some limitations. It is obviously not the type of content you would normally use an image for, and this technique dose not change that. It is definitely not accessible. On top of that, I’ve detailed some further technical limitations below.
For the most part setting and changing X and Y attributes of SVG elements with CSS will not work. Although this will be fully possible in SVG 2.0, for now there is an exception to this rule in Chrome with regard to <image> elements. It is also possible to use CSS transforms to manipulate positioning, but you will find this has limitations as well.
As I mentioned in the earlier example of responsive art directed images, external SVG files will not load additional link references in the SVG source. Other limitations require that I use images, so I’ve used base64 encoded dataURIs.
In this case I’m encoding additional SVG files as the image source. Each has their own CSS and the ability to be responsive based on their own width. This can get complicated quickly, but it can also be a powerful technique.
The final limitation and the one I could not get around is that setting or changing the height of an SVG with CSS doesn’t work! Even if it did, the image in the HTML sets its height based on the SVG attribute value only. I doubt the image would resize when an internal media query changes the height of the resource. It’s like the SVG would have to reach up into the parent context and notify it of a change in height. This is the same for other methods of embedding external SVG.
There’s still plenty you can do, given these limitations.
Every new technology has limitations, and the web has many. Because of this, I think we often give ourselves perceived limitations, based on our past experience. In this case it’s easy to approach SVG with the same mindset as HTML and CSS, because “I know how image work on the web”.
When we do this it’s easy to miss opportunities to explore new and creative techniques. The examples I’ve demonstrated, probably only scratch the surface of unique possibilities with SVG. I hope I’ve got you thinking and I would love to see more examples.
One final though, it’s important to be wary of perceived limitations, not just with SVG. This is especially true at the moment with a wealth of new layout features landing in browsers soon. It will require new perspectives to take advantage of new opportunities. Practice this now, there’s never been a better time in the history of the web for creativity and discovery.
from Sidebar http://sidebar.io/out?url=https%3A%2F%2Fmadebymike.com.au%2F%2Fwriting%2Fsvg-has-more-potential%2F
by anthony on 09/27/16 at 12:05 pm
Years ago it was common practice to place a link to your sitemap in the footer navigation. Those days are over because the footer itself has become the new site map.
A sitemap is where users can go to find a directory of all site links on one page. But this is no longer necessary for most sites if you design your footer right (although XML sitemaps are still necessary for SEO).
Back then, the footer was rarely considered an important usability element. One study shows that most sites would use a traditional footer. It would contain a short line of administrative links and copyright info. The belief was that most users don’t use the footer because it’s at the bottom of the page.
The traditional footer has now evolved into the mini sitemap. Mini sitemap footers are not only gaining more but more effective than traditional footers. Testing found that a mini sitemap footer resulted in more sales and clickthroughs.
If you have a large site, you should make your footer a mini sitemap of its own. When users can’t find what they’re looking for in the header, they’re going to look in the footer. This is where they should see a comprehensive list of your site links organized by category.
Cramming too many links in your header can make your menus messy and overwhelming. Reserve the header for your most important content links and use the footer for all others.
When you make your footer a mini sitemap, users can rely on it to find what they want faster. This is because the links are all laid out and not tucked inside dropdown menus. Users don’t have to open and sift through dropdown.
Not only that, but they also don’t have to click a category link to get to more specific links. They can just click the specific link directly.
It also saves them time from using the search field. They don’t have to type in a keyword to the page they want. Once they scroll to the footer, the link is there.
An effective mini sitemap footer needs distinct category labels that contrast with links. If you don’t include them, you’ll make it hard for users to scan the list of links. Users need to be able to spot a category and scan that list without wasting time on others.
You should have ample spacing between your links so that they’re easy for mobile users to tap. If you have many links and categories you should consider using an accordion menu to display them. This not only saves space but it’ll prevent errors from tapping smaller targets.
Not all sites need a mini sitemap footer. If you have a large site that holds a lot of content, you should consider it. This is especially important for ecommerce sites where users need to find products quick.
Designers should no longer ignore the footer. It’s a site element that needs care and attention. Organize it with lists of links that will make all your site’s content quicker to get to.
Author and editor-in-chief of UX Movement. Finds beauty in clear, efficient design and loves fighting for users.
from UX Movement http://uxmovement.com/navigation/why-the-footer-is-the-new-site-map/
https://www.1843magazine.com/features/the-scientists-who-make-apps-addictive
from WebdesignerNews https://www.1843magazine.com/features/the-scientists-who-make-apps-addictive
This article was written by Fjodor Van Veen.
With new neural network architectures popping up every now and then, it’s hard to keep track of them all. Knowing all the abbreviations being thrown around (DCIGN, BiLSTM, DCGAN, anyone?) can be a bit overwhelming at first.
So I decided to compose a cheat sheet containing many of those architectures. Most of these are neural networks, some are completely different beasts. Though all of these architectures are presented as novel and unique, when I drew the node structures… their underlying relations started to make more sense.
One problem with drawing them as node maps: it doesn’t really show how they’re used. For example, variational autoencoders (VAE) may look just like autoencoders (AE), but the training process is actually quite different. The use-cases for trained networks differ even more, because VAEs are generators, where you insert noise to get a new sample. AEs, simply map whatever they get as input to the closest training sample they “remember”. I should add that this overview is in no way clarifying how each of the different node types work internally (but that’s a topic for another day).
It should be noted that while most of the abbreviations used are generally accepted, not all of them are. RNNs sometimes refer to recursive neural networks, but most of the time they refer to recurrent neural networks. That’s not the end of it though, in many places you’ll find RNN used as placeholder for any recurrent architecture, including LSTMs, GRUs and even the bidirectional variants. AEs suffer from a similar problem from time to time, where VAEs and DAEs and the like are called simply AEs. Many abbreviations also vary in the amount of “N”s to add at the end, because you could call it a convolutional neural network but also simply a convolutional network (resulting in CNN or CN).
Composing a complete list is practically impossible, as new architectures are invented all the time. Even if published it can still be quite challenging to find them even if you’re looking for them, or sometimes you just overlook some. So while this list may provide you with some insights into the world of AI, please, by no means take this list for being comprehensive; especially if you read this post long after it was written.
For each of the architectures depicted in the picture, I wrote a very, very brief description. You may find some of these to be useful if you’re quite familiar with some architectures, but you aren’t familiar with a particular one.
Read more, here.
DSC Resources
Additional Reading
Follow us on Twitter: @DataScienceCtrl | @AnalyticBridge
from Everyone’s Blog Posts http://www.datasciencecentral.com/xn/detail/6448529:BlogPost:470286
At GobySavvy, we follow a 9-step process for UX reviews. In our experience, the process helps us actually get our recommendations implemented.
I’ll explain exactly how this process works, using our project for online retailer SkyMall as an example.
For revealing business goals and user needs, the process can be light and lean (simple questionnaire and a 1-hour discovery) or in-depth (user interviews, shadowing customer support, and multiple stakeholder interviews).
For SkyMall, we followed the light and lean approach to fit a tighter budget and timeline. They were in the midst of a website revamp, and wanted to make sure they were heading in the right direction.
They approached us to learn about current pitfalls in their website’s UX, UI design, and content strategy, and to discover what rebranding options were available. Their bottom line goal was increasing revenue with higher conversions.
Knowing this, we prepared a questionnaire and hopped on a 1-hour call with their project leaders. We made sure to ask about:
All of this information feeds into our simple personas and user flows to guide the review (more on that later).
If you can’t access analytics directly, ask for reports for specific timeframes and segments.
With SkyMall, we weren’t able to access analytics ourselves, so we asked their team to put together reports of popular landing pages with bounce rates and time on page, ecommerce conversions data, mobile and web statistics, and user flows (Behavior Flows in Google Analytics).
Google Analytics showing key pages ordered by popularity. Time, bounce rates, and page value shown.
Google Analytics showing eCommerce Goal completions. Although only one goal is listed here, additional goals might be: newsletter signups, contacts, free content downloads, etc.
Google Analytics showing behavior flows from landing pages through checkout.
By looking at this data for SkyMall, we saw that most people entered through two key paths:
The people landing on a specific product page have a higher rate of eCommerce conversions (sales), lower bounce rates, and a simpler behavior flow.
The biggest problem area was visitors coming in through the home page. A majority of visitors clicked a product on the home page, viewed that product, browsed around to other products, and then bounced.
We now knew the main user flow to optimize: People landing on the home page, clicking around on products without any clear goals on what they want (browsing), and bouncing. Users either could not find their product easily or none of the products caught their attention.
Now that we’ve seen where to focus, we can build simple personas and user flows to guide the rest of the UX review.
For SkyMall, we identified four main personas from the initial stakeholder questionnaire session:
With these personas, we built a total of 20 user flows, but ended up only choosing the top 5 most relevant to SkyMalls business goals. Remember: the key to a useful UX review is focusing and prioritizing.
Based on analytics and conversations with the SkyMall project leads, we found two main flows were most useful:
Like I mentioned before, we created a total of 5 flows. In addition to the above two, we also created flows for browsing through the main navigation, landing on categories or product pages from email, and cross-sells of other products.
However, we focused first on fleshing out flow #2 since it showed the largest percentage of people bouncing before adding products to cart. For this flow, we designed the full purchase path.
Key page flow (#2) with accompanying user story to guide the UX review.
For the rest of this article, we’ll focus on the most important flow seen above.
We’ll follow user stories step-by-step through each page, specifically looking for problems areas that affect engagement and conversions.
When you move through the user flows, consider the user goals on each page (“When the user lands on this page, they might immediately look for…”).
Each expert has their own approach to how they create the report itself. I recommend Google Slides, because it’s easy to collaborate with others, can be accessed from anywhere, and can be shared via URL or exported as a PDF.
In Google Slides, I will distinguish sections by page or flow, such as “Home”, “Navigation”, “Product Page”, “Cart”, “Checkout”, etc. When conducting the review, I’ve found it most efficient to detail issues, opportunities, and solutions as I go, rather than making organizing a long list later.
You’ll find a wide variety of UX checklists, UX principles, and UX research easily accessible around the web that you can use. For each issue you reveal, I follow Jakob Nielsen’s four point system of prioritization.
When writing about issues, keep it brief, unless the issue is critical and ranks at least a 3 or 4 on the below scale:
Slide detailing issues on a product page for user flow #2. We ranked the entire set of issues as 3 “Major usability problem” (top right). The most important issue was the lackluster product reviews functionality.
Finding issues is the easy part. Clients and companies pay for solutions.
As we find issues, we describe the best solution, and include a screenshot from another website to support the description. And if we’re ever unsure about the best solution, we recommend user testing as a next step after the UX review.
Above all else, we must be as prescriptive as possible. We break everything down at each step of the flow. It’s always better to over-communicate than risk your audience making dangerous assumptions.
a. BAD: “Add more vibrant colors to the home page to reflect your brand and engage users.”
b. GOOD: “Add variations of your three brand colors to the home page. Main color: purple, to give hints of elegance. White: simplicity and clarity to allow focus on images. Black: Elegance and contrast. Purple can be used for the main banner background and for some icons and headers. White should be used for most backgrounds. Black should be used to contrast purple; can be used for main call-to action buttons.”
Slide detailing solutions to the issues in the prior slide.
The most challenging, yet potentially rewarding part, is identifying opportunities for conversion and engagement opportunities. This part is not as straightforward as fixing issues. If you’re a UX designer with less than three years of experience, this is a skill that gets stronger and stronger over time.
For example, maybe we see an opportunity for a website to use an exit-intent pop-up offer in a non-intrusive way to recapture some leads or purchases. Or, maybe we notice that the website can make use of persuasive design techniques like exclusivity or time pressure to upsell people to the higher value product. These techniques aren’t exactly “issues”, but rather opportunities tailored for business impact.
For SkyMall, one of the major opportunities we identified was adapting their massive brand appeal for online consumption. The SkyMall website brand, design, and layout was missing the “unique” feel that SkyMall’s products used to create for people browsing their airplane catalogs.
In the modern digital age, we decided to focus on curated content for a specific audience. In our case, this was a unique message, an “experts recommend” feature, a retro collection of age-old popular products, etc.
By increasing the opportunities for Skymall to present products in a fun and consumable manner, we aimed to increase the soft-sell conversions.
Slide providing high level brand opportunities, which we described in detail during a follow-up meeting.
Every UX designer wonders if they missed any issues or solutions. Let’s be honest: we use Google just as much as our own personal repositories of UX principles.
Here’s some quick tips to help focus your search endeavors:
Usually a UX review is read by someone who is passionate about the digital product under review: a founder, CEO, product manager, designer, or developer.
Make sure to balance out all the bad with some good. Remember the principles of good design feedback.
Include a section about what has been done well. This not only cools down the room, but also ensures that the team earns praise for their current best practices (which incentivizes them to keep doing so).
Power dynamics always plays a role in how well your suggestions are received. Nobody wants to look like they’re a fool in front of their boss.
This step is optional, but highly recommended.
After looking at an interface for hours and hours, you start to become biased and overlook obvious issues and opportunities.
Even if it’s just 30 minutes, try to budget in an outside UX expert’s review, to give you pointers, tie things back to business goals and user needs, catch major issues, catch opportunities from their area of expertise, etc.
Even better, run some guerilla usability tests. If you’re designing for mass-market consumer audiences, buy five Amazon gift cards ($10 to 20 a piece is enough) and head to your local Starbucks. Test with five people, then include their feedback in your final report.
Services like UserTesting and 5 Second Tests are also highly affordable for scaling targeted tests in a hurry.
A UX review is designed for quick wins. It’s a cheap simple insurance policy against obvious UX issues choking the bottom line.
Start outlining a plan of action with suggested dates. Of course, you aren’t a project manager or product manager. But at least you’re closing the conversation in terms they respect and understand.
For SkyMall, we ended our report with a high-level roadmap of activities. We would create a more detailed roadmap for our next conversation.
Once you’re finished, it’s time to start implementing the recommendations. Good luck!
from The Next Web http://thenextweb.com/dd/2016/09/22/how-to-conduct-a-ux-review-that-wont-get-thrown-out/