Tag: blog

Articles

Figma VS Sketch

Figma VS Sketch

Figma is like Sketch in the browser with real-time collaboration.

With the limited time I had with it, I can already say with confidence that it’s far more polished and production-ready than in my first experience with Adobe XD. It also has three invaluable features that set it apart: real-time collaboration, vector networks and version history. It can handle dozens of designers working on the same document, at the same time without breaking a sweat. Last but not least, this tool is really fast, easily handling 20+ Artboards in a single document.

People will inevitably compare Figma to Sketch, so as a long-time user of Sketch, I’d like to share my experience, following a tradition that I started 3 years ago.

Browser VS Native

I was skeptical at first because Figma is a browser-based user interface design tool, but now I’m convinced that there is a future in this area. Everything is extremely responsive, works as expected and the software is almost every bit as powerful as its native counterpart Sketch, minus features like Symbols, Overrides and Plugins. Every document and version exist on their server, making the task of iterating effortless and worry-free. You can still save your document as .fig to make it downloadable. Like this, you can share your Figma files with others.

By default, Figma uses Google fonts (a free library of 800+ fonts), but you can also add your own by installing an add-on. They even included the hugely popular FontAwesome. I think this is an incredibly smart move, since collaborators won’t need to download extra fonts when they jump in.

Real-time collaboration

For many teams, this is a game-changer. Being able to design with a fellow designer, engineer or client in real-time will save a ton of time in both execution and communication. Although not every project needs collaboration, it’s good that the possibility is there.

You can quickly work alone, then invite others whether they’re signed up or not to edit or view-only your design in progress. The advantage of a browser-based tool is that the recipients won’t need to install anything at all, or even own a Mac to participate. Figma works on Mac, Windows, Linux and on mobile devices (viewing only). I can’t overstate how this will completely change team dynamics and allow true collaboration between designers and developers. Anyone can just come in and check all the specs: fonts, colors, sizes, distances, etc. Developers can benefit from inspecting the constraints and how the layouts adapt to multiple screens.

Version History

The versioning is much more visual in Figma, allowing you to quickly compare between versions. It’s a lot more pleasing to use than Sketch’s macOS native versioning, which feels slow and over-the-top. While they both have Autosave and version history, their execution is completely different.

In Sketch, it’s slow to navigate between each version. Often times, designers disable this feature because it eats too much of their disk space.

Comments System

The comments feature is built-in. Team members can pin comments to your designs and you’ll receive notifications when there are new comments or replies. Once you’re done, you can click “Resolve” to hide the thread.

In Sketch, you can add comments by downloading a plugin or use the excellent Zeplin for a more interactive solution that includes specs and assets delivery.

Zeplin is also browser-based, so it works for Mac/Windows.

Another Sketch plugin worth noting is Craft from InVision, which allows you to design with real data. You can quickly generate names and photos from presets, Websites or APIs.

If you put Sketch together with Craft, InVision and Zeplin, the package suddenly becomes a lot more attractive for comments and prototyping.

Vector Networks

Vector Networks is groundbreaking. You can move the lines instead of the vector points, and all the connected points will automatically follow. That’s because instead of having just a beginning and an end point, you can connect multiple vector lines in Figma, creating a web of vector points. It’s incredibly intuitive once you start using it.

Vector Networks introduced by Figma.

Sure, it’s still missing things like Scissors or Rotate Copies, but for most vectors, I believe that Figma is easier to use and Vector Networks can lead to interesting results.

Import from Sketch

Figma was able to import Sketch files extremely accurately. Every Artboard, Groups and layers were left intact with their exact names, grouping and properties, including multiple borders, shadows and effects like Blending modes and Background Blur. Because of this, I’m inclined to say that using Figma as an extension of Sketch or vice versa is not a far off idea. You can basically import any existing Sketch work, resource or vector and start from there. The fact that they don’t support Photoshop files (yet) speak volumes of the level of compatibility that it has with Sketch versus Photoshop.

Strangely, I couldn’t copy and paste vectors from Sketch to Figma, but I could drag and drop an SVG file directly into an open document.

I was even able to import the extremely detailed vectors from Angle and got a fairly impressive result. Sure, the gradients and shadows aren’t as good-looking (sometimes even missing), but all the shapes were there. This is a big deal because you can use virtually any Sketch UI Kit in Figma.

There’s a Desktop-ish app

You can download the desktop version, but don’t expect a native experience. It’s basically just a Web wrapper. Still, unlike the browser version, the keyboard shortcuts won’t interfere with browser’s. For example, CMD + 1–9 switches between browser tabs, but in the Desktop app, it switches between documents. You also get rid of the extra browser chrome.

Constraints

Adaptive layout is an indispensable feature for modern design tools. Designers have to deal with an increasing amount of device resolutions. It would be silly not to be able to adapt a design from the iPhone 7 to 7 Plus just by resizing the Artboard.

In Figma, you set up the constraints by pinning against the borders, or setting the element to center. It’s essentially like Sketch’s Pin to corner and Resize object. I have to admit that Figma’s version is more visual and intuitive to use while Sketch has more options like Float in place.

Is Float in place any good? Yes, if you want the elements to keep the same proportional distance and size between each other.

Performance

Handling dozens of Artboards is a breeze in Figma (but your fan may start kicking though). Those who complain about Sketch’s performance may find better luck here. Seeing that it’s browser-based, the entry point is much lower for practically anyone owning a desktop, laptop or mobile phone. As a matter of fact, those who long wished for Sketch to come out in Windows finally have their answer.

The User Interface

The user interface is almost an exact replica of Sketch, down to the tiniest details like the names of the tools, keyboard shortcuts, the Artboards and Groups, or the Export tool. Don’t get me wrong, this is a GOOD thing for users. It just means that Sketch has set such a powerful standard that both Adobe XD and Figma have no hesitation following.

Sketch is like the “iPhone” of design tools, in that most new tools will copy its standards, add a few twists, but years down the line, they’ll mature enough to be truly unique on their own. In the end, users win the most as they get more choices at the highest standard. In other words, they’re no longer stuck with Photoshop for UI design, the same way they were stuck with dumb smart phones with clunky keyboards. Of course, I don’t mean this as an insult to Figma or Adobe. They’re smart to answer the modern designers’ needs in a way that don’t confuse them, making their transition as smoothly as possible. To be fair, a lot of these standards came from the Mac and Adobe’s own Illustrator and Fireworks (RIP).

Should you use Figma?

I think the answer is a resounding yes. You don’t need to learn a new tool, because it feels and works like Sketch. For me, switching between these tools felt completely natural.

Both tools can reinforce each other, meaning that they can fulfill different needs as you switch between Mac and Windows, iOS and Android, home and office. I’d choose Figma for its real-time collaboration, multi-platform support (Windows, Mac, Linux) and Sketch for its platform maturity, true native experience, and its excellent plugins and resources. In term of features, I think both will eventually catch up to each other (Real-time Collaboration, Vector Networks, Comments versus Symbols, Overrides, Plugins).

Figma is totally free until the end of the year, so give it a try.

from Sidebar http://sidebar.io/out?url=https%3A%2F%2Fmedium.com%2F%40mengto%2Ffigma-vs-sketch-c01e5e74eddd%23.93f977tz3

Articles

Breadcrumb Navigation: Good for Website Usability or Not?

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.

What is Breadcrumb Navigation?

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

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.

picture1

Path based

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 –

  1. They replicate the functionality offered by the back button
  2. They might confuse users who end up navigating to wrong sections of the website
  3. History trails are not good for users who arrive directly at a web page that’s deep-seated within the website hierarchy, such as a product page.
  4. They can duplicate content delivery to search engines, negatively impacting the website’s ranking.

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

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.

picture9

So, why is breadcrumb navigation great for web usability?

#1. It allows easier navigation

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.

#2. Finding content becomes easier

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.

picture4

#3. Breadcrumbs make things visually pleasing

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.

picture3

#4. Lowers bounce rates

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.

Wrapping Up

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/

Articles

Business Savvy UX Design: Improving Business Acumen For Designers

Business Savvy UX Design - Improving Business Acumen For Designers

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.

UX and the Business Environment

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?

Emphasize the Business Context of Design

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.

Improve Your Business Communication Skills

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.

Align UX Design Strategy With Business Goals

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.

Do Not Isolate Yourself – Collaborate

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.

Develop Situational Awareness

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.

Final Thoughts

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/

Articles

What UX Designers Can Learn From Video Games

Credit: Guillaume Kurkdjian

What UX Designers Can Learn From Video Games

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

1. Gamification

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.

Duolingo
Bing rewards redemption page

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

REDperks rewards on Target purchases

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.

2. Easy Learning

Learning in successful games start with combining gameplay and learning rather than using a lengthy tutorial or video.

Teaching new actions in a simple way

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.

3. Customized for User’s Skill Level

Mario kart

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.

4. Immersive Storytelling

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.

Assassin’s Creed

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.

Monument Valley

Conclusion

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.

—

Thanks for reading! Feel free to check out my design work or my new handbook on UX design, now available on Amazon.

from Sidebar http://sidebar.io/out?url=https%3A%2F%2Fuxdesign.cc%2Fwhat-ux-designers-can-learn-from-video-games-87f165289ed1%3Fsource%3Dtags

Articles

How to stop designing things that won’t get built

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.


waste-4

Where the 40/40/20 method started


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:


waste-2

  • 40% — MVP. The highest impact must-haves. Thought through fully, documented fully, back end in place, ready to be passed off to front end for implementation.

  • 40% — V2. The nice-to-haves. Mostly thought through. Might need a little back-end work. Ready to be documented whenever engineering is ready for it.

  • 20% — Innovation. Sort of thought through. Could be ready for implementation with another 2–4 hours of design work. Probably requires some back-end time.


Here’s a real example with a recent conversation redesign we implemented, and how we broke it up:


waste-3

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:



waste-1

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.


More posts like this

from InVision Blog http://blog.invisionapp.com/40-40-20-design-process/

Articles

SVG has more potential

SVG has more potential

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.

Complex positioning

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.

Art directed responsive images with SVG

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.

Adaptive images

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?!

Container queries?

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.

Caveats and limitations

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.

Setting X & Y attributes with CSS

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.

External sources in embedded SVG

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.

Changing the height

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.

Time of discovery

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

Articles

Why the Footer Is the New Site Map

by 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).

Traditional Footers

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.

Mini Sitemap

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.

mini-sitemap-footer

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.

Designing the Footer

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.

scannable-footer

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.

accordion-footer

Mind the Footer

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.

PRODUCTS

Light Resume Light Freelancer Wireframe Sheets Wireframe Patterns Flow Patterns

AFFILIATES

Elegant Themes CSSIgniter

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/

Articles

Concise Visual Summary of Deep Learning Architectures

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