Google’s Android Wear 2.0 watch platform is the company’s biggest shot yet at jumping into the fitness tracking world dominated by companies like Fitbit. Is it there yet? Not quite.
The company’s revamped smartwatch operating system improves upon many of the problems that plagued Android Wear watches for the past two and a half years. I’ve had a chance to try out some of its features on both the LG Watch Style and the LG Watch Sport.
The good news is the interface is cleaner and easier to navigate, with an on-watch Play Store for downloading apps, and watch faces that can be customized to include app shortcuts and widgets — including Google Fit stats like steps and calorie count for one-glance use. Shortcuts to start Google Fit workouts are easier to make, too.
When the update arrives on existing watches over the next few weeks, along with newly updated apps, the revamped fitness experience could possibly rival your Fitbit. But at this point, it still has work to do.
All-day fitness tracking
Android Wear watches always had some basic fitness-tracking features. They could track steps, distance, calories burned and active minutes. Google Fit will also automatically log workouts. It’s similar to what we have seen from Fitbit and Samsung. The watches know when you are walking, running, biking and even doing aerobics. The workout will then be logged automatically in the Google Fit app.
Sarah Tew/CNET
Automatic workout tracking is helpful, but sometimes it can get confused. A moderate walk with my dog was recorded as a bike ride, for example. The lack of on-watch indicators was also frustrating. It’s unclear when exactly an exercise is being recorded. You won’t know until you open the Google Fit app on your phone. On Samsung’s Gear S3, the automatic recording happens more clearly and with better heads-up stats on recent accomplishments.
Android Wear 2.0 now comes preloaded with a new and improved Google Fit workout. The app gives you the ability to view all of your fitness data right on the watch. It also lets you set a specific fitness goal, such as walking 10,000 steps or running three times a week. Unfortunately, the app still doesn’t support all-day heart-rate tracking or sleep tracking, although there are some third-party options available in the new Wear app store that do. But with Android Wear’s challenged battery life, I’m still probably going to keep mine charging at night.
On-watch workouts
In addition to tracking daily activities, the new Google Fit app now includes on-watch workouts. It’s similar to what we saw on the Fitbit Blaze, but a little more advanced since it can actually count your reps. You can choose from three different exercise challenges: push-ups, sit-ups and squats. The watch will then give you tips on how to do the exercise and show you the proper form.
Sarah Tew/CNET
The idea is to do a little more each day. If you did five push-ups on Monday, you should go for six on Tuesday and then maybe seven on Wednesday.
Overall, I found the rep counting to be accurate, as long as I kept the proper form (itching my nose during a squat gave me an extra rep). The workouts were fine, although I wish there was more of a coaching aspect. I did 20 push-ups, great. Now what? Should I really be doing 20 each day or should I only do it a few times a week? I wish the Google Fit app could provide feedback and recommendations on other workouts I should be doing, rather than simply logging my exercise.
Tracking exercises
Another new (and preinstalled) app is called Fit Workout. The app is used to track a variety of exercises, such as walking, running, biking, treadmill running, stationary biking, aerobics, stair climbing machines and strength training (if your watch has a heart-rate sensor).
Sarah Tew/CNET
The watch can show real-time data for each of these workouts, but it’s not great. The data is broken down into three live stats that can be customized with a specific metric, such as heart rate, pace, distance, elapsed time, calories, steps or time of day. That’s it. A lot of other watches, such as those from Garmin, let you customize each metric across multiple workout screens. I like to view pace, distance, elapsed time and heart rate when I run. This wasn’t possible with the Fit Workout app.
Where are my friends?
There are a lot of smartwatches and fitness trackers out there, all at varying price points, but few do fitness tracking better than Fitbit. The app is easy to use and has the largest social base. If one of your friends owns a fitness tracker, there’s a good chance it’s a Fitbit.
Sarah Tew/CNET
The benefit of this is being able to compete with friends and family members in a variety of competitions, which helps keep you motivated and more likely to reach your goal. Fitbit will also soon be adding a Facebook-like News Feed for even more social interactions.
There are no social features in Google Fit. You can’t see how friends are progressing and you can’t compete against them. There is no motivation factor whatsoever. The Apple Watch made small strides with social features in WatchOS 3 fitness. They’re not as good as Fitbit, but they’re better than Android Wear 2.
No iOS support
While Android Wear is cross-platform, Google Fit isn’t. Even though you can use an Android Wear watch with an iPhone, at this time there isn’t an iOS app to view your fitness stats. Your only option view them on the watch or on the Google Fit website.
Meanwhile, Fitbit offers a Web interface and apps for iPhone, Android and even Windows. Granted, Apple Watch has the same issue with its Activity and Workout app, but then again the Apple Watch doesn’t support Android. Samsung S-Health, by comparison, can also run across Android, Samsung and iPhone.
Sarah Tew/CNET
Better, but not the best
Running perfectly on an iPhone isn’t a deal breaker. But not working as well as a Fitbit could be. Google Fit has gotten better, but it’s still oddly bare-bones on Android Wear and sometimes sluggish when syncing data. Automatic fitness tracking should happen more obviously on-watch and more social connections are a must.
Fitness is one of the reasons people are buying smartwatches. At this point, I would opt for a Fitbit Blaze or Garmin watch for fitness tracking and smartphone notifications. Android Wear is moving in the right direction, but Google Fit isn’t the killer feature it needs to be.
from CNET News https://www.cnet.com/news/android-wear-2-0-fitness-features/#ftag=CAD590a51e
Valentine’s Day was a nail-biter for Jody Mulkey, chief technology officer at Ticketmaster. Coming off high-profile Grammy performances Sunday night, both Chance the Rapper and thrash-metal band Metallica put tickets on sale for their upcoming tours. Metallica went at 6:00 a.m. ET and Chance at 4:00 p.m. As fans flooded onto Ticketmaster’s website, Mr. Mulkey […]
from CIO Journal. http://blogs.wsj.com/cio/2017/02/17/for-those-about-to-rock-ticketmaster-migrates-infrastructure-to-aws/?mod=WSJBlog
Words are a powerful weapon. They can bring both success and failure depending on how you put them together. They can motivate or confuse, strengthen or weaken, call or push away. That’s why designing a digital product, it’s vital to remember that high-quality copy is as essential as the details of visual performance.
In one of our previous articles, we’ve already considered the big role of textual content in UI design, covering the definition of copy and its functions in graphic user interfaces. The important point to remember from it here is the words cannot be fully replaced with the graphics whatever amazing, high-quality and professional they are going to be. Efficient and engaging copy content in user interfaces is defined by two equally significant basic criteria: the quality of writing and the appropriate look. Words and visual elements should mutually support each other, exist in harmony and provide organic consistency. So, every single piece of copy should be thoughtfully analyzed and created in a way corresponding to the general design concept and enhancing positive user experience via successful interaction.
Could you imagine an interface containing badly-written copy with the same type sizes, fonts, and colors? The chances are big that it would cost users great effort to solve their problems or get needed information with the product, so they would simply choose something different that is more user-friendly and less time-consuming. Let’s check what types of copy content designers and copywriters deal with creating websites or mobile applications, and think over the points needing special attention.
Visual hierarchy
To organize content in interfaces clearly for users, designers apply a well-known technique called visual hierarchy. It is initially based on Gestalt psychological theory and its main goal is to present the content on the carrier, be it a book page or poster, web page or mobile screen, in such a way that users can understand the level of importance for each element. It activates the ability of brain to distinguish objects on the basis of their physical differences, such as size, color, contrast, alignment etc. In the aspect of creating copy content for web pages and mobile app screens, there are two aspects important to consider: page scanning patterns and typographic hierarchy.
Understanding the importance of visual performance and readability of copy in digital products and its impact on user experience, numerous usability experts explore this issue comprehensively and collect statistics providing valuable data for designers. Lots of studies have shown that before reading a web page people scan it to get a sense of whether they are interested. According to different studies, including the publications by Nielsen Norman Group as one of the pioneers of this field, UXPin team and others, there are several popular scanning patterns for web pages, among which “F” and “Z” patterns.
F-pattern is referred to as the most common eye-scanning pattern, especially for web pages with big amount of content. A user first scans a horizontal line on the top of the screen, then moves down the page a bit and reads across the horizontal line which usually covers a shorter area. And the last one is a vertical line down on the left side of the copy where they look for keywords in the paragraphs’ initial sentences. It usually occurs on text-heavy pages like blogs, news platforms, thematic editorials etc. How could designers employ this knowledge? First of all, placing the information of key importance or core interest on the most scanned spots and trying to use short catching headlines and bold headers to draw users’ attention.
Z-pattern is applied to pages which are not so heavily concentrated on copy. A user first scans across the top of the page starting from the top left corner, looking for important information, and then goes down to the opposite corner at a diagonal, finishing with the horizontal line at the bottom of the page, again from left to right. This is a typical model of scanning for landing pages or websites not loaded with copy and not requiring scrolling down the page, which means that all the core data is visible in the pre-scroll area. In this case, designers place core information in the spots of highest attention, such as top corners, and put the other points requiring attention along the top and bottom lines.
Here we can see the design concept for a website which presents the online magazine «The Big Landscape». The interface is minimalist following the principles of clear visual hierarchy, good readability, intuitive navigation and aesthetic pleasure from visual perception. The designer followed Z-scanning-pattern placing vital elements such as the logo and CTA button in the corners of the top line while the bottom line informs users about the website creators and provides the ability to contact via social networks instantly.
Typographic hierarchy
Typographic hierarchy is a system that organizes copy content in the best way for users’ perception first of all via modifications and the combination of types and fonts. It is aimed at creating the contrast between the most meaningful and prominent copy elements which should be noticed first and ordinary text information. The contrast is created by regulating type fonts, sizes, and colors as well as their placement and alignment. Typographic hierarchy is presented with common types of copy content used in UI design.
Headlines
A headline is the first thing that users should see in any interface. It is a large, bold word or phrase which transfers and emphasizes the core informative message on the page. It’s essential for headlines to be catchy and short so that they could draw users’ attention, and meaningful in order to inform users about the theme and benefits of the content of the page or screen. According to the research published by one of the popular social media sharing platforms Buffer, the ideal length of the headline is 6 words; Jacob Nielsen provides the study at which shows that headlines of 5–6 work effectively, not less than extensive headlines presenting a full sentence.
Another point to remember: it’s good when headline is visually supported by other elements on the page or screen, still it also should be understandable and meaningful without such context.
Here is the landing page for a company organizing photo tours and workshops for photographers. Functional and stylish minimalism is the basic approach behind the web interface. The bold headline is placed on the left which makes it noticeable but the major accent still remains on the head picture.
These are two examples of the websites concentrated on providing content around the same theme — food. They both have the minimalist design with centrally located headlines. However, the headlines differ with the message they send to the users as well as nature of the websites differs in its core: one of them stimulates uniting users around the action (cooking seafood) while the other is focused in presenting the goods (bread and bakery). The first example presents a website collecting recipes of meals with seafood from all over the world, so its headline contains a CTA with a key element — action verb in imperative form “Let’s cook!”, which dynamically tunes users into the activity. On the other hand, we can see another concept — a website for a small bakery selling homemade bread. The lyrical headline makes users feel warm, sets strong positive emotional connection and lets them instantly imagine the smell of bakery products which are sold via the website.
Subheaders
It’s impossible to put all the significant information in a headline, that’s why you need subheaders. These are brief, concise and catchy phrases that are similar to headlines, although they typically mark out the key points in separate sections while headlines summarize the theme or message of the whole page. Following the principles of visual hierarchy, fonts chosen for subheaders are usually smaller than for headlines but bigger than the rest of the copy. Traditionally, they are also bold and short.
Subheaders play a big role in landing page design. These two concepts for landing pages above are good examples of how subheaders inform users about the data provided in different sections. Bold subheaders point out the main idea of body copy helping users find the information they need easily and quickly.
Body copy
Body copy is usually a part of text presenting the description or some essential information placed in a compact block, usually under a subheader or a headline. Fonts are thinner and smaller than in headlines and subheaders, sometimes they are presented in italic for even more prominent visual contrast.
There is no unified opinion about the best length of body copy. Some content creators support the approach that long copy is more informative and serious-looking, while the others claim that only short copy is effective because Internet users never want to read too much. Here in Tubik we support the approach that the length of the effective and user-friendly copy depends directly on target audience: users, as well as products, are incredibly different, they have diverse preferences, goals and wishes when search for web resources or mobile apps. Both long and short copy have their own pros and cons, and each of them can be appropriate than depending on target audience of the product and its conversion goals.
Short copy is often effective for mobile interfaces and landing pages: their users are usually keen to see concise and highly informative copy content. Moreover, mobile interfaces have limited amount of space, so too much copy won’t look nice and will demand additional effort for reading, which can be the reason for poor user experience. Long copy is good for web resources that provide users with complex information on specific topics as well as presentation of the products which aren’t well-known for users and need additional informative support.
Here is the example of a web page where long copy is useful. It’s a design concept featuring a website for architectural bureau following minimalistic and functional approach in creative practice and demonstrating it via website visual performance. The aim of such websites is to tell the company’s story, present professional level and achievements, so detailed copy works efficiently in this case.
This design concept also presents a website deeply based on the copy: it’s an educational project setting the online encyclopedia about the specific family of birds. Although it contains a great amount of information presented in text, this type of content is logically divided into many brief and concentrated copy blocks supported with prominent headlines as well as bright and catchy illustrations. This approach makes interaction with the website more dynamic which is especially effective for a teenage part of target readers that presumably often perceive encyclopedias as boring stuff.
As we mentioned above, short copy is useful for mobile interfaces since they are limited in space. The interface of brief tutorial for Toonie Alarm app demonstrates how copy is divided into short blocks in order to leave enough «air» on the screen and make copy readable.
Call-to-action elements with copy
The core elements that make UI interactive are those which contain a call-to-action (CTA). Some call-to-action elements may be represented with icons that don’t require copy using widely and instantly recognized icons such as a telephone receiver for a phone call or the envelope for mail. However, in cases when the image of an icon is not so obvious or can be misleading, it is more effective to use double scheme, when the icon, button, or link is supported with the copy.
The copy for call-to-action elements consists of one or two words or a linked phrase in a body copy. Verbs in the imperative form are one of the frequently applied mechanisms of engaging users. Designers are recommended to use various techniques of creating contrast, first of all via color, in CTA elements, so that they could stand out in the layout and draw user’s attention quickly.
The CTA buttons on these two landing pages are both centrally located, although they employ different types of copy. The first one consists of the four-word-phrase, while the other applies only one word. However, both look good and work effectively since they both contain the verb in the imperative form and inform target audience about appropriate action solving their potential task on this website.
This is a concept for an unusual Good Sign app that gives you a new sign to look for, and you make your wish every time you see it in real life. Such an extraordinary app has also unusual CTA buttons like “Make a wish”.
There’s no need to create CTA buttons exceptionally in bright colors — their main task is to be easily noticeable in the general layout. If the interface is bright and colorful, why don’t you make the contrast with light background which will make bright copy even more prominent, like in a concept for the Book Swap app above?
Captions
Caption is the short text under a picture describing its content. In web interfaces fonts are usually small and often italic, and in mobile interfaces, the sizes of fonts depend on a size of a picture.
Here is a concept for the landing page of a gym. The captions here have bold fonts that make them easy to read. They are shown only when the picture is hovered which makes interaction more engaging for the users.
Points to consider
All in all, creating a quality copy content isn’t that hard if you keep in mind the typographic hierarchy principles. And here are some basic tips on presenting the copy:
Create catchy headlines. They draw users’ attention and often become the point of decision whether user continues interaction with the page or bounces it.
Make headlines short, but keep them highly informative.
Subheaders relate to separate section, so they guide users through the content in the interface.
Use brief concise copy for mobile interfaces and landing pages.
Consider using long copy for web resources aimed at providing informative content.
Use verbs in the imperative form to encourage people to actions.
Use contrast colors for call-to-action elements, so that they could draw user’s attention more effectively. However, don’t forget to test readability of the text on the CTA elements: it has a crucial impact on usability and conversion rates.
A caption should preferably describe or add the data that isn’t obvious from the image.
Give strong preference to present tenses in captions.
Always ground your solutions on preliminary user research and don’t neglect testing different options.
Recommended reading
Here is the collection of recommended articles for further reading in case you would like to read more on the theme.
The Cloudstitch Sketch Plugin is an open source extension of the Sketch Data Populator that lets you also use Google Spreadsheet and Microsoft Excel data in your Sketch designs.
Plutio by Ian Assam. Sorry Ian, I can’t unsee it. And now, dear reader, you can’t either.
My money is on these gaining popularity too. So let’s beat the crowd, and talk about a few ways of coding these up. Because let’s face it: they do look pretty awesome.
Image
Perhaps the simplest way to create any of the non-rectangular headers pictured above is to slap an image on top of your header.
Responsive behavior? These masks tend to be full-width, and it becomes tedious to define multiple widths of the shape (e.g. srcset) or risk pixelation of raster assets.
It’s a totally separate file that needs to be fetched from the server – seems wasteful for simple shapes.
It’s slow to iterate in-browser if you have to re-export an image file(s) from your design program.
We can solve all of these problems at once. You might already know where this one is going.
SVG
Compared to exporting a JPG from Sketch, using an inline SVG is more performant, easy to make responsive, and easy to iterate the design of. In fact, for most cases, this is the way I’d recommend using. Versatile, cross-browser, vector, and fabulous.
With an angled background one like, one choice you have to make is: what should remain constant as the screen-width changes, the angle or the height differential between the two sides?
If you want the angle to remain constant, set the height of the SVG in vw:
If you want the height differential to remain constant, set the height of the SVG in pixels:
And you need not pick just one – we can style this responsively, since SVG elements are subject to media queries. Check out this geometric style header at widths below and above 700px.
(Perhaps that’s more properly done with beziers, but you get the idea!)
One more thing worth nothing, and that is if you want to do an SVG background entirely in CSS, you could save the SVG and reference its URL in a pseudo element.
And if you use `divider.svg` as a repeating element in different scenarios, you can also color it different as you need:
header::after polygon {
fill: white;
}
But here’s an issue: what if the section below the header has a complicated background? In all these examples so far, we’ve just assumed a plain white background. What if there’s a fancy gradient, or another background image or something? Then what?
clip-path
This property comes to the rescue if you have a moderately complex background below the header, and therefore want the masking to be done from within the non-rectangular header, as opposed to by an element after it.
And like the similar SVG syntax, if you want to change the responsive behavior of the above from angle-is-held-constant to height-differential-is-held-constant, you can change the calculated height to a simple percentage.
Clip-path’s biggest downside? Browser support is not that great. However, depending on how important your non-rectangular header or div is, it might qualify as a progressive enhancement. In which case, clip-path away!
border-radius
Now, up to now, we’ve only mentioned methods that work for generating all the shapes I called out above. However, if we know what particular shape we want our header to have, we might have access to an easier way.
For instance, a convex elliptical header is a perfect fit for border-radius.
This has the side effect of skewing any child elements of the skewed element, so you’ll want to add a child element in the header that gets skewed, and everything else will go in sibling elements.
Skewed.And unskewed.
Stripe’s homepage design uses this method, and even more brilliantly, they include a few children spans (each is a block of color) that get skewed with the parent element, creating a more complex and colorful effect.
Which is best?
As far as I’m concerned, SVG is generally the way to go. However, if you have a more complex background below the header, then the best choice depends on the shape. In that case, I’d investigate if skew or border-radius could meet the art direction needed, or if browser support was enough of a non-issue to go with clip-path.
Allows complex BG below
Browser support
Shapes creatable
Image
No
Yes
All
SVG
No
Yes
All
Clip-path
Yes
No
All
Border-radius
Yes
Yes
Elliptical only
Transform: skew
Yes
Yes
Trapezoidal only
from Sidebar http://sidebar.io/out?url=https%3A%2F%2Fcss-tricks.com%2Fcreating-non-rectangular-headers%2F
So, you’ve got an idea, and you want your team’s feedback. You definitely don’t have time to worry about perfect pixels, organizing a beautiful deck, or spot-on colors. You just need to get the ball rolling.
Start off on the right foot with our newest tool from Craft by InVision LABS—introducing Freehand, a fast, flexible new way for your team to collaborate, in real time.
Freehand is an infinite, collaborative space for your team to work through design ideas in real time. Ideas are driven in part by diversity—how quickly and often can I get this new concept in front of my team, and how easily can they share their feedback?
With Freehand, it’s never been faster—or easier—to validate and expand on your ideas. Launch Freehand using your initial, live design files as a foundation—then click, draw, and deliberate your way to clarity.
With Freehand, you can:
Add artboards or images from Sketch and Photoshop
Hand off control to your teammate
Co-draw to share sketches and rough ideas
Undo, redo, and scale
Comment to share your feedback
Save and share your work
And lots more!
Anyone can use Freehand, and it works for any project type. Collaborate in real time, from any device, with Sketch or Photoshop. Best of all, it’s free, and comes along with Craft’s other revolutionary plugins, like Data, Duplicate, and Sync.
Kayleigh Karutis Kayleigh is a content strategist here at InVision. She got her start as a news reporter, and she still considers that time she wrote the entire paper among her greatest achievements.
Written in large letters along the wall of our office in Palo Alto is the phrase, “Great stories move the world forward.” On the facing wall, floor-to-ceiling photographs depict defining moments in our history — the Mars Curiosity rover crawling across the sands of the red planet; David Bowie as Ziggy Stardust; Jackie Robinson leaping to catch a fly ball. These images honor the great stories of our time that have moved the world forward. Stories like these embody the passions that drive people to improve our world: space exploration; musical expression and gender identity; sports and civil rights. At Flipboard we strive to create a product that gives people a place to find and engage with these kinds of stories.
Over the years, we noticed that people began to use Flipboard for more than just keeping up with the news. In fact, we observed that people got the most out of their Flipboard experience when engaging with things they cared about deeply — their passions. And so it was no surprise when our CEO Mike McCue tasked us with reimagining Flipboard to focus on people’s passions.
How & Why
Designer Frank Chimero, in his book, The Shape of Design, writes about the distinction between “How” and “Why” when designing. As Chimero says, it’s one thing to ask yourself “How” you might design something — the colors and type, the interaction model, the copy and messaging. It’s a different question to ask, “Why?”. Before thinking about how a new passion-focused Flipboard might look and feel, we first needed to establish a set of guiding principles that would inform our work.
We began with a handful of research initiatives aimed at uncovering how people think about, consume, and organize their passions. One of the initiatives focused on examining our internal “interest graph” — a visualization that shows the relationship between the tens of thousands of topics on Flipboard.
A slice of the Flipboard interest graph
We learned that people’s interests generally fall into high level categories — things like news, technology, and sports. In looking more closely, we observed that each high-level category contained smaller “clusters” of interest. For example, one cluster in photography included street photography, film, and black & white, while another included landscapes, DSLRs, and Photoshop. These clusters highlighted the fact that people tend to construct unique hierarchies of interest.
Our other research initiatives revealed similar findings. In-person interviews, surveys, and remote user-testing all showed that people’s passions were categorical at a high level, but uniquely different at their core. As a guiding principle, in order to focus Flipboard on people’s passions, we needed to design a system that would allow people to freely construct and access uniquely-tuned hierarchies of interest.
Personalizing Passions
Constructing a hierarchy of interest sounds like a lot of work. We wanted people to be able to create personalized reading spaces quickly and easily. Flipboard should do the heavy lifting, bringing the best stories directly to you.
Some of our early design explorations focused on organization and gave people the ability to explicitly group anything they followed. However, this grouping meant people would need to constantly manage and sort the things they followed. This direction gave people clear spaces for reading about their passions, but required too much upfront effort and ongoing organization.
Creating and controlling these reading spaces had to be lightweight. People needed an interface that could effortlessly reflect their unique set of interests, not task them with constant management.
Ultimately we arrived at a design that quietly guides people to define their interests for any given category. Rather than constantly needing to manage what you follow, this approach allows people to simply select the kinds of stories they want to read, and Flipboard takes care of the rest. We call these new personalized reading spaces, “Smart Magazines”.
Various iterations for making a smart magazine
You can make a smart magazine for anything — news, travel, climate change, classical music. Personalize them by selecting subtopics that reflect your specific interests. For example, you can make a design magazine that focuses on prototyping, information architecture, and interaction design, or make one for typography, identity, and color theory. (Each of us on the design team has made our own design smart magazines, and they’re pretty awesome.)
A New Home
Knowing how people would create and edit their smart magazines, we needed to design a way for people to navigate between them. Our research showed that people have different reading modes (catching up on the news in the morning; leaning back to read about travel in the evening). We wanted to respect these reading modes and give people a way to quickly switch between their passions.
Initially we tried an approach that modestly departed from our previous navigation model.
Exploring various navigation models
Although this approach built off of people’s existing Flipboard mental model, the bottom tab-based design was hard to navigate and didn’t truly focus the experience on people’s passions.
The final design is the result of over a year’s worth of sketching, prototyping, and testing — a new home space that brings a person’s passions to the front of the experience. No matter the reading mode, people can seamlessly move between their smart magazines, and effortlessly personalize them however they’d like.
Throughout this process, we also developed an entirely new set of visual and interaction standards — typography is more readable, interactions are smoother, and core UI components are more consistent. These new standards more clearly embody the Flipboard brand and aim to improve the overall experience.
A selection from the Flipboard standards guide
Looking Forward
This new Flipboard is just the beginning. We now have a new baseline to play with and build upon — a product that empowers people to engage with their passions and to discover stories that move the world forward.
Expect to hear more from the Flipboard design team in the coming weeks. We are eager to contribute to the shared body of knowledge started by our design colleagues across companies and industries. We believe that our collective stories can elevate the craft for all of us.
The update is available today on iOS and Android. We hope you’ll take the new Flipboard for a spin…or flip.
Icons8 Lunacy is a free tool for opening .sketch files in Windows. You can copy CSS of any object with one click, copy plain text for any text layer (more features are in development). Icons8 Lunacy works offline.
This tool was created to help designers who love Sketch and their clients or developers to collaborate.
Lately, I needed to come up with some top level principles for the product I’m currently working on. I seek for some simple yet powerful concepts that will guide our team design decisions and break stalemates in discussions. For the first step, I decided to look around to see what others come up with. Through a miracle of time, I bring together this compilation, that should be useful for those who face the same challenge.
But first, I found that there are some misleading concepts what are design principles itself, so let me take a quick dive into the topic.
The range of principles
If you try to google “Design Principles” you most likely run into some basic rules of graphic design: proximity, balance, contrast, space, etc. Things that good designers usually familiar with, or, most likely, know inside out.
The next huge part is principles of a rational design process. It’s a set of concepts that makes you a true professional who’s able to provide an excellent design with great efficiency. Applying these principles to the whole team sets a bar of standards that new employees should match or reach in the short term. Let’s take a look at the GOV.UK Design Principles.
The list seems reasonable, but what I think is that such things are an industrial standard by now. Everybody design with data, and everybody tries to understands context. I believe that if you choose design principles for your team, you should pick some that are groundbreaking and challenge your team to go further.
Some teams put their principles online, and I regularly bump into some statements which sound like “be human” or “be communicative.” I hold a firm belief that such shit isn’t worth to be hanging on a wall unless your team is full of insensitive silent jerks and you want to change that fact. Why did you hire them in the first place?
So, what I was looking for, are product design principles. And the Gov.UK provides at least one:
This is for everyone Accessible design is good design. Everything we build should be as inclusive, legible and readable as possible. If we have to sacrifice elegance — so be it. We’re building for needs, not audiences. We’re designing for the whole country, not just the ones who are used to using the web. The people who most need our services are often the people who find them hardest to use. Let’s think about those people from the start.
Design Principles of your product should tell you, your team and stakeholders which directions you should be going in the tough choices. They should focus on what distinct your product from others, how it feels and what is important for the business and your customers.
You are probably aware of the Apple’s Human Interface Guidelines or Google’s material design guidelines. Design principles behind these systems try to unify different products under the platform and bring the shared feeling to them.
If your product exists on various platforms, you should consider having a design system and some principles behind it, as well as the product design principles. You want to distance your product from others and unify the experience through different touchpoints, operating systems, and screens.
There goes the same problem: some teams put obvious design principles for their product: clarity, simplicity, usability — but you can’t create a good product without keeping such things in mind, and nowadays professionals stick with such principles by default.
Wrapping up
Principles of good design a scope of rules that define a great design.
Principles for the design process explains the way of work to create great products.
Design principles for the products how a product should feel, what emotions should it brings, what distinct it from the others.
Design principle for the systems unify your product experience in different circumstances.
Do you need design principles for your product?
Having strong principles doesn’t necessarily make your product strong at the end. Apparently, the great product requires great execution at all stages of creation, and design principles are just a small bit that guides your decisions and brings valid arguments in the disputes. They share the common vision and save time.
What are the good principles?
Simple
Have a real world examples
Guide design decisions
Reflect your brand
Collection
I gathered all principles that feel right to me. I don’t include basic design rules or process principles, but I added the Design Systems principles since they are overlapping with product design principles.
Cheers!
Here we go:
Unified Each piece is part of a greater whole and should contribute positively to the system at scale. There should be no isolated features or outliers.
Universal Airbnb is used around the world by a wide global community. Our products and visual language should be welcoming and accessible.
Iconic We’re focused when it comes to both design and functionality. Our work should speak boldly and clearly to this focus.
Conversational Our use of motion breathes life into our products, and allows us to communicate with users in easily understood ways.
Design as the “mutual friend” Helping minimize uncertainties and setting expectations online, in the product, is an enabler for a meaningful experience offline, in the real world. We build products to let users get to know each other; we also learn what you’re looking for, and with that knowledge, we open the door to new experiences. We set the stage, help make the introduction, then get out of the way. And like a good friend, we’re there for you when you need us.
Design for first impressions Although Airbnb requires some information from our users to book, we don’t require disclosure. That is, we ask guests to tell us who they are, but it’s up to them to tell us about themselves.
Trust takes effort As with most things in life, you get out of Airbnb what you put into it. Trust on Airbnb is shared; it goes both ways. We’ve found the more effort a guest can signal to a host, the more trust a host is willing to give that guest.
from Sidebar http://sidebar.io/out?url=https%3A%2F%2Fmedium.muz.li%2Fdesign-principles-behind-great-products-6ef13cd74ccf%23.9m10krl99
Imagine you run an eCommerce website. You know that visitors find you in search engines and that they interact with your homepage. They even get started on your checkout process. But at some point, they do not convert. And you do not know why. It might be time to update the information hierarchy. Or the user flows. But how do you know what needs rejigging and what does not?
A User Experience Audit (UX Audit) is a way to pinpoint less-than-perfect areas of a digital product, revealing which parts of a site or app are causing headaches for users and stymieing conversions. As with financial audits, a UX audit uses empirical methods to expand an existing situation, and offer heuristics-based recommendations for improvements, in this case, user-centric enhancements. Ultimately, a UX audit should let you know how to boost conversions by making it easier for users to achieve their goals on your site or software.
This beginners’ guide to the UX audit aims to equip teams with the basics to conduct their audit, or to better understand the benefits and limits of an external audit.
What Happens During a UX Audit?
First up, the big questions. What exactly happens during a UX audit and how does it fit in with usability testing? During a UX audit, an auditor will use a variety of methods, tools and metrics to analyse where a product is going wrong (or right):
Review of business and user objectives
Conversion metrics
Customer care data
Sales data
Traffic/engagement
Compliance with UX standards
Usability heuristics
Mental modeling
Wireframing & Prototyping
UX Best Practices
The difference between usability testing and a UX audit is one of information flow direction: an audit infers problems from a set of pre-established standards or goals, whereas testing infers problems from user actions. Granted, an auditor may use usability testing during an audit if they do not have access to the fundamental metrics, but they will combine the results with data collected over the longer term and weigh them up against industry standards and product goals.
What can a UX Audit tell you, and what are its Limitations?
It is important to point out that a UX audit is not a panacea for all a site’s UX woes. It is ineffective if recommendations are not actionable, or are not followed up. It also requires a significant investment of time and labour, to the detriment (or at least delay) of other tasks when the internal team does the audit.
However, while a UX audit cannot solve all the problems of an ailing site or app, it can be used to answer some profound questions:
What is working, and what is not?
Which metrics are collected and which should be collected?
What does the data tell you about user needs?
What has already been tried, and what impact did it have on metrics?
An efficiently done UX audit incurs plenty of benefits for a product. It provides actionable follow-up activities based on empirical evidence, not hunches. It supports strategic design plans. It produces metrics that can be used in future tweaks. And it helps form hypotheses about why users act in a certain way, and how they might behave in the future. Most saliently of all, it contributes to boosting conversions and ROI once follow-up action is taken.
Who Should do a UX Audit, and When?
Tim Broadwater, writing on LibUX, sets out a good rule of thumb on when you might want to carry out a UX audit: “(an audit) should be conducted in the very beginning steps of a website, web application, dedicated app, or similar redesign project.” The word ‘redesign’ is key here; audits are usually carried out on a product or service that has been live for some time has a backlog of data to examine. New features and products are more likely to be put through their paces with usability testing rather than a holistic audit.
As a general rule, companies without a dedicated UX team stand to benefit most from a UX audit; those with an in-house team are most likely evaluating the product and tweaking the experience continually.
If cash flow allows, it is advisable to have external parties carry out the audit: it is hard for internal teams to get a distance between themselves and the product, and subconscious prejudices will hamper the process. Nate Sonnenberg gives a helpful outline of how much it costs to call in the auditors: upwards of $1000 for a couple of days with a one-person team; the full monty of a UX team coming in for four weeks and providing in-depth, goal-orientated insights could cost up to $10,000. But, according to Nate, in 2-3 weeks you will find 80% of issues, which is enough to get started.
However, all is not lost if the budget does not stretch to an external audit: it is possible to audit your product internally by following an objective process, utilising the wide variety of available tools and (if you are not already) becoming au fait with UX best practices and standards.
Let us take a look at what you need to get started on your UX audit.
What do You Need to Get a UX Audit Done?
You will want to involve a cross-section of the team – designers, developers, product strategists and business managers. Also, it helps to nominate an audit lead, who will take decisions on process and timeframe.
As with any other project, the following also have to be agreed from the get-go:
Audit goals (conversion, ROI, etc.)
A time limit, which is important because you could, theoretically, go on auditing forever
How many resources you are willing to dedicate to the audit: time, workforce, money
An Overview of the Process
Once you have set the basics, it is time to adumbrate the process. Starting from a birds-eye perspective, the UX audit consists of six main stages: metrics and materials gathering; validation of results, the organisation of data; review of trends and tendencies; reporting of findings; creation of evidence-supported recommendations.
Metrics and Materials Gathering
The most difficult part of a UX audit is possibly the first step, the gathering of relevant materials. If goals were properly defined before embarking on the audit, you would know what kind of information you need; now you just need to think which metrics will provide you with that information.
Get team members on board in information sharing existing information and tracking useful metrics you do not currently have, and this step will be easier.
Here are some sources of metrics and materials helpful in an audit:
A heuristic product evaluation: Conduct a cognitive walkthrough of the product to see things from a customer’s perspective. Take notes as you try to achieve user goals, and focus on identifying potential obstacles. Be aware that your knowledge of the product will make this task difficult – basing the process on established criteria, such as Nielsen’s heuristics, will help you stay focused.
Website and mobile analytics: If a heuristic evaluation provides you with qualitative data, then analytics tools will provide the necessary quantitative information you need. Most people should be familiar with the basic functions of Google Analytics, such as traffic source, traffic flows and trends over time; more advanced functions can elucidate user flows within the website, conversion (and abandonment) hotspots and what users are doing before and after they visit your site. Tools such as Kissmetrics and Crazy Egg can supplement basic analytics with features such as heat maps and churn rates; app analytics can be collected either through Google mobile analytics, are through a dedicated tool such as Mixpanel. Make sure you are going far back enough in the analytics to recognise trends, rather than basing the audit on isolated data points.
Conversion rates or sales figures: If the premise of your site or app is eCommerce, sales or download figures can be useful to a UX audit. For example, here at Justinmind, we measure how many blog readers download our prototyping tool and from which particular posts: this gives us an insight into how our content fits in with the wider user experience of Justinmind and whether we are meeting user pain points.
Stakeholder interviews or user surveys: As with any UX endeavour, you have got to get out there and talk to real people. Start off by interviewing internal product stakeholders such as product owners and developers, questioning them for insights on the product’s plan, requirements and ongoing development challenges. You can also ask what they want to see out of the UX audit, which will generate faith and goodwill in the audit process. Also, find out if the marketing or sales department has ever conducted user surveys: there is likely to be a wealth of comment and feedback within these surveys that you can use in a UX audit. You can organise this feedback into categories – findings per screen or task, for example – and according to severity.
Previous product requirements: Acquiring access to an application’s original requirements will save you time and help you understand why design decisions happened the way they did; this information will be useful when it comes to writing up viable recommendations.
At this stage, it is possible to pause and validate the qualitative data collected through usability tests. For example, if past user surveys revealed that the customer check-out process was complicated, conduct usability tests to see if you can back up this unsupported claim.
How to Organise the Materials you have Collected
In a word, spreadsheets. All the information obtained in step one should be tracked on a worksheet and aggregated. Upload the spreadsheet into the Cloud and make it a living, collaborative document where questions and ideas are recorded alongside relevant metrics.
If you are unsure about what you need to put in the spreadsheet, try out these helpful templates:
Look for Trends and Tendencies
The moment when you have to turn data into insights is often nerve-wracking: turning metrics into meaningful change is a profound issue that is beyond the remit of this article. Suffice to say that there are methods that will help you make sense of the information in front of you, such as data-mining, card sorting (not just for UX architects but also perfect for aggregating any mound of information) and insight incubation. Check out Steve Baty’s post in UXmatters for more on finding patterns in UX research.
Reporting of Findings
After mining data for insights it is time to develop hypotheses about the application’s user experience status: why do users act as they do instead of in the way stakeholders want them to. You can compare the insights you garnered against the following four keystones of successful products:
Relevance: is the site or app addressing a user pain point? Is there a disconnection between expectation and reality when users find your product?
Value proposition: is the value to the user clear and convincing?
Usability: are there points of ambiguity or uncertainty in your product interface, or do customers’ intuitively understand what to do?
Action: Are calls to action visible and relevant, and do they incentivise users to take action?
Creation of Evidence-Supported Recommendations
Finally, data-driven recommendations for UX improvements can be written. The key here is to make recommendations as applicable as possible. We are fans of the recommendations given by Joseph Dumas, Rolf Molich and Robin Jeffries in ‘Describing Usability Problems: are we sending the right message?‘:
Emphasise the positive
Express your annoyance tactfully
Avoid usability jargon
Be as specific as you can
On a more substantive level, do not forget to supplement recommendations with examples, rather than just identifying areas for general change. For example, in this sample UX audit report from Intechnic, recommendations include “for forms and resources, rearrange according to the number of clicks” and “in navigation drop-downs, remove images”. Suggesting solutions for the design-development team will always be a more positive, effective tactic than merely criticising where the application has failed on user experience.
Basic UX Audit Resource Kit
Your UX audit kit will obviously depend on the product you want to audit, and the final objectives that you’ve set out. However, the following resources and activities should equip you with everything you need to get started:
A Beginner’s Guide to the UX Audit – the Takeaway
A user experience audit requires significant investment in terms of time and human resources if done internally, and money if contracted out to professional UX auditors; it is not to be undertaken lightly. However, the benefits to an established site or app are visible, particularly if conversions are stagnant or slow-growing and the users’ voice is not represented in the product improvement process. By undertaking a UX audit, you can bring about significant, data-driven change to an application and see upticks in both user satisfaction and ROI.
from UsabilityGeek http://usabilitygeek.com/ux-audit-beginners-guide/
