Tag: user experience

Why You Should Switch to Code-Based Design

Why You Should Switch to Code Based Design

Since the very beginning of digital product design, the default way of designing user interfaces has been image-based.

Designers have been drawing different states of the mobile app or web designs using graphic design tools – GIMP, Fireworks, Sketch, or now Figma, Invision, Adobe XD (which you can in Adobe Creative Cloud) – and then the development teams have been writing code that would replicate what has been drawn.

Over the years this method has proved to have considerable limitations. What limitations are those and is there an alternative? Read on to find out.

Drive design process improvements, take care of operations, and boost collaboration with engineers with UXPin Merge. Request access to see if this design technology is for you. Discover UXPin Merge.

Reach a new level of prototyping

Design with interactive components coming from your team’s design system.

The Problems with Image-Based Design

In the image-based design approach, designers produce a set of static artboards representing different states of the interface and forward them to software developers to code interactive interfaces on their basis. This brings about a lot of troubles for not only the UI design but also the whole product development process – let’s have a closer look at them.

  • Lack of interoperability: There is virtually no connection between designers’ and developers’ universes. Designers work outside of the constraints set up in code and therefore, unknowingly, create things that are very difficult and expensive to code. 
  • Lack of accuracy: As the image-based tools use completely different methods for rendering the result of the designers’ work, texts, gradients, and colors that have been carefully chosen look different in code when an engineer applies the same specs. Some details are missing and some ideas that looked great on a static image are simply impossible to recreate on an actual working product. The handoff then turns into a nightmare. 
  • Static designs: Image-based design only allows for building static artboards, so even simple behaviors (e.g. expanding a dropdown) quickly become unmanageable. Interactive components can’t be reused and there’s no way of setting states of elements, defining variables for content, or using conditional logic. There are prototyping tools out there that fake the interactions but none actually use the ultimate language that creates the clickable elements in real life – the code. 
  • Weak design-engineering collaboration: Even if you use a style guide or a design system, image-based design tools are completely separate from the engineering processes. They’re rather abstract and – unlike technologies used by developers – can’t be experienced by users as the final product. This lack of interactions or having very limited ones, and the inability to import components from code keeps engineers and designers disconnected and frustrated with one another. As a result, not only the handoff drift appears, but also the final user experience suffers.

The benefits of code-based design 

This alternative approach to product design allows designers to render their design intent directly in code… without even knowing how to code! Whenever they draw something, the tool creates relevant HTML, CSS or Javascript, and engages the browser, showing the result visually. This totally flips the entire software designing process, making it more efficient and beneficial for everyone involved. The benefits are as follows.

Code-Based Design Ensures High-Fidelity and Interactivity

Unlike image-based tools, the code-based approach provides 100% match between the intent of a designer and a code-able result. That’s because code-based tools use the same technology as those used in web development to render all of the design projects. As a result, designers can benefit from the full power of code without any coding expertise.

Code-based design tools allow for drawing objects that move, interact, and create complex patterns – on the highest level of interactivity. Before coding the final version, software developers can fully experience the product instead of just imagining how it should work.

There’s no redundant code, so the software works quickly and it’s easy to maintain it. And as the provided designs reflect the approved standards for software development, the final products created by a given company or a software house are consistent with one another. 

Code-Based Design Bridges Gap Between Design and Development 

The code-based design establishes a common language for both designers and software developers. Since everyone involved in the process uses the same technology, there are fewer misunderstandings between teams, especially on the handoff stage.

ou can even go a step further and use a technology such as Merge which allows you to take components that have already been coded by engineers and import them into your code-based design tool. It uses elements that can actually be coded – because those ready and interactive components come from developers.

This establishes a single source of truth for your entire software project – all the components and documentation are stored in a components library like Git (importing React components), npm or Storybook and designers and engineers are connected in one collaborative, creative process, preventing misunderstandings and frustrations from building up.

Also, it helps to avoid inconsistencies in the user interface, code, and documentation – which in the long run saves a lot of time and money by optimizing the design process.

Code-Based Design Provides Endless Possibilities 

Code-based design allows you to have richer prototyping options. And with the aforementioned Merge tool you can greatly extend them.

You can create your own components that can be reused all across interfaces of different products you work on. This saves your entire team a lot of time and effort on designing, coding, and testing particular elements – you only need to do it once. And this also means there are fewer bugs in your products.

Code-Based Design Allows for Powerful Interactions

Using code-based design allows you to create prototypes that look and behave exactly like the final product built by developers. Instead of linking artboards, code-based design tools use the most advanced interactions on the components level, allowing designers to create highly reusable interactive design systems.

Simply put: designers draw interfaces with text fields that can be clicked in, checkboxes that can be checked and unchecked, and so on. Goodbye, static artboards!

PayPal and Code-Based Design

Don’t just take our word for it – some of the top UX designers in the industry corroborate what we say. UX Design team at PayPal did a test of Merge, our new technology in our code-based design tool. Our solution has accelerated their work while giving them the power to easily create their own beautiful high fidelity prototypes consistent with their Developer Console standards.

When compared with an image-based tool, the design quality was much better and there were fewer errors. Also, unlike the competing image-based software, the drop-downs, calendar buttons, and data table controls made using UXPin Merge were interactive. And the entire designing process took less than 1/6th of the time spent doing the same job using the competing software!

Try it Out!

As you can see, switching from image-based to code-based design is a no-brainer. It can only save your team time, effort – and frustrations. To unleash the power of merging the design and development workflows, request access to UXPin Merge.

Discover Merge

Why Data Science and UX Design Need to Become Best Buds

Data Science and UX Design

Long gone are the days when design used to rely almost solely on the creativity of designers.

Technologies are sophisticated, subsequently rendering users more demanding. UX design has been blurring the line between art and science. According to Adobe, 38% of people will stop engaging with a website if its layout or content is visually unappealing. A similar percentage of website visitors will bounce if images take ages to load.

Enter data science to help you avoid death by bad, unintuitive design.

Eliminate educated guessing  

Successfully executed UX design has a strong scientific basis. You must make informed decisions. So before you start designing, it’s essential to go through 6 steps that mimic the scientific method:

  • Ask a question
  • Do research
  • Develop a hypothesis
  • Run experiments
  • Analyze your findings
  • Make an informed decision and implement it

Never throw darts in the dark and make assumptions on what will get website visitors to stay longer and convert. There’s a sea of information for you to dive into and find what you need. The problem, however, isn’t to collect all that vast data on user preferences. It’s to process and analyze it in a systematic manner to provide you with ready-to-use insights.

Unrightfully neglected by UXers, Google Analytics (GA) can make your life easier. This free tool helps you learn valuable information about visitors: what they’re doing and looking for on your website, where they come from, how much time they spend on each page, whether they engage with certain content, or whether mobile visitors behave differently than desktop visitors, among many other things.

How to make the most of Google Analytics:

Optimize your Bounce Rates

Assess which pages have the best and worst bounce rates. Apart from allowing you to access the report for each individual page, GA offers analyzing your landing pages and establishing the sources from which visitors enter your website.

Improve your Average Time on Page metrics

As the name suggests, this report shows you how much time a visitor spends on a particular page engaging with content. A lower average time indicates that visitors don’t react to your content particularly well, especially if that page features a lengthy blog post. This is a sign to optimize it. In certain cases though, a visitor quickly leaving means they easily found the information they were looking for.

Get to the bottom of Device Usage

This is a metric that has become increasingly important over recent years. Bear in mind that mobile traffic is expected to grow 7-fold from 2016 to 2021, according to the Cisco Mobile Forecast! With this report, find out how your visitors access your website. If you notice that your mobile sessions are extremely short, then fix things and take a multi-device friendly approach.

Obtain insight into Demographics

Gender, age, interests, level of education, income, location, and other information are crucial to understand the requirements of your target audience and their preferences when it comes to user experience and satisfaction.

Data Science + UX Design = More Conversions

Based on relevant metrics, you can build a website with UX design capable of capturing visitors’ attention and prompting them to fill the form or make a purchase. By having access to a huge volume of processed data, you’ll be able to pinpoint what exactly to do to make your design appealing and functional.

Fine-tune your layout

A/B testing has long been the most effective way to determine the performance of each element on your web page. However, this hit-and-miss method is time-consuming. Hence, a dynamic website design with adapts based on visitors’ interactions is the way to go. Heat map analysis is another tactic to boost conversions. By monitoring the eye or mouse cursor movement, you can get an idea about what colors, fonts, buttons, or types of content make your visitors tick. Since this can be pretty challenging, check out the works of acclaimed agencies specializing in web design to pick up some tricks of the trade.

Polish your content

As you know, content still reigns supreme. However, it won’t do much if visitors can’t locate a useful piece on their topic of interest. That’s why a search box is a must. This tiny element not only helps your visitors navigate your website easily, but also sheds a light on whether the results people get correspond with what they’re searching for. As a result, you can make your content more valuable and meet their expectations.

Personalize your website

Relevant visitor data is crucial for tailoring your content and giving each visitor a unique and personalized experience. The point is to avoid one-size-fits-all messaging and addressing your target audience in a bland, generic manner. Instead, connect with them on a deeper, more personal level by displaying adaptive CTAs, messages, or visuals. With segmentation, you can target different audience groups with suitable messaging and imagery, and avoid the redundant information they don’t care for.

Analyze your traffic

New leads are the lifeblood of every business. In order to understand how to optimize lead generation process, you need to identify what the most effective methods are and insist on them. Evaluate every acquisition channel and leverage those which bring the most qualified traffic. Spying on your competitors is another way to steal some of their thunder and copycat their successful tactics for your own benefit.

Maximizing Your Data’s Value

Insanity is doing the same thing over and over again and expecting different results.

This quote, mistakenly attributed to Albert Einstein, perfectly sums up the importance of trying a variety of things to create the best UX design. Sometimes a seemingly small and irrelevant change can make all the difference.

A few things to bear in mind when you’re assessing your data:

A/A testing is as equally useful as A/B testing

It’s used to prevent a false positive result which occurs due to an error in data reporting. False positives account for a whopping 80% of all A/B test results. But, if you show two random groups the same landing page or CTA, instead of two different variations, you can ensure the quality of execution as well as of your analysis tool.

Watch out for a novelty effect

Sometimes, the early performance of a redesigned website might show a sharp upward trend. Not because of the improved UX design, but because of the interest in its changed appearance. This quickly wears off, and you’re presented with a more realistic situation.

Beware of Twyman’s law

It can mislead you into believing that an interesting and unusual stat is correct. This glitch can be the result of a certain bias, data errors, or even bad design or test circumstances.

The instrumentation effect is another threat to the validity of your UX design research

This occurs if you change the instrument, observers, or measurement device during the process. So, make sure that your experiment is tested before it goes live. This means that you should use different browsers, devices, and an extra pair of eyes to help you prevent any issues.

In conclusion, data science can be vital to the success of your UX design. It holds the key to your visitors’ behavior and expectations, but you must learn to use it and be aware of its potential pitfalls.

Join the world's best designers who use UXPin.

Sign up for a free trial.

8 Years on the Design Tools Market, 5 Lessons Learned

UXPin’s 8th birthday this month brought on some deeply nostalgic memories.

Eight years on the design tools market has given us a pretty broad perspective. We’ve seen trends come and go, big companies enter the market and leave, companies with lots of capital doing nearly nothing and small players out–innovating everyone. One could write endlessly about it. I don’t want to bore you, so instead I’ve boiled it down to five specific lessons.

1. Being right is not enough. You have to be right at the right time.

Timing is everything. We’ve experienced it all — we’ve been too early, too late and exactly on time. Only the last group of events strongly benefits business.

Examples of being too early

The first version of UXPin had a flawless real–time collaboration (multiple people editing one design mockup simultaneously. We called it multiplayer design) in… 2011. No-one really cared about it for the first 5 years of UXPin. Only with the growth of design organizations and the expansion of remote work did real–time collaboration become truly important.

Eventually we stopped believing in multiplayer design; and this feature completely disappeared from our communication (but not from our product!). Then, a competitor announced it like it was new. Not an unrecoverable loss, but still a loss.

Another feature of our 2011 UXPin (since cancelled) was the ability to turn paper prototypes into… HTML–based prototypes. Yes. We had a technology able to transform paper prototypes into HTML… in 2011.

UXPin in early 2012.

 

It was a powerful marketing machine, but with little real–life usage, we ultimately killed it in 2013. Now, 7 years later, similar products are reappearing on the market as an applauded innovation; it seems that folks are more willing to experiment with its value in real design processes. We were way, way too early.

Examples of being spot on

Back in 2015, interest grew in solutions to help organizations scale design processes without making the whole system more disjointed. The market of tools seemed almost completely empty, and customers were desperately trying to build their own solutions. We moved fast and announced Design Systems as part of UXPin before significant competitors could. First mover advantage helped us establish a solid presence on the enterprise market.

UXPin Design Systems. We were right on time!

 

Additionally, just two weeks ago, we launched “expressions”, a feature that exposes JavaScript methods in a design tool in a friendly way — similar to Excel formulas. Expressions allow designers to create interactive prototypes with accurate simulations of, for example, form validation, eCommerce shopping carts or sign–up/sign–in flow… basically anything that is possible on the web can be accurately prototyped in UXPin.

Prototype created entirely in UXPin. Real validation and recognition of type of a credit card.

 

A few years ago this feature would have been rejected in the divisive discussion, “Should designers code?” Nothing like that happened after the launch of expressions. On the contrary — the feedback was enthusiastic and we’re seeing amazing traction among both coding and non–coding designers.

2. Only achieving critical mass of value lets you escape the market’s gravity.

Sometimes it feels like a new design tool emerges every other week. After a couple of days of excitement on the market, the tool starts to fade away. 12 to 18 months later? No signs of any development.

Why?

Design tools are complicated. Hundreds of small features must exist for mass adoption of the product. Even the biggest players with the deepest pockets stumbled on this very problem, launching premature tools that, after initial excitement, got flooded with negative feedback. When folks don’t use your tool even though it’s available for free, you know something’s not working well.

UXPin minimalistic design in light and dark mode. Designed in early 2014. Introduced in 2015. Apparently later it inspired all the other design tools on the market 🤪.

 

I remember how surprised I was back in 2012, when some users said that they wouldn’t use UXPin until we have all the “alignment” features. As a designer, I’ve always preferred snapping and smartguides, so I didn’t see automatic alignment of elements as a key feature. And yet, to many users, it was imperative.

It took us nearly 6 years to really cover all the missing features in the product.

In the form of astrophysical paradox — a design tool only gains enough speed to escape the market’s gravity when said tool achieves the critical mass of value.

Basically, a few cool features are often enough to generate buzz, but not enough to make people switch the tool.

3. People switch tools when the perceived value is greater than the perceived cost of the switch.

Switching tools is never entirely painless. Old habits die hard; the feeling of comfort can anchor somebody to their old tool for a long time, even if (objectively) it stopped making sense quite a while ago.

And yet that anchor can be eliminated. If the perceived value exceeds the perceived cost of the switch, old habits are quickly replaced by excitement.

We see it constantly. Someone talks to us reluctantly and with a speech about the merits of their current tool. Ten minutes later, they want to strategize on how to move forward. The value of the product has to be proven, and once it is, the obstacles to growth disappear.

PayPal runs their design process in UXPin. Our customers are the best!

 

That said — a key moment in UXPin’s path to becoming a leader on the enterprise market was introduction of solid account management and professional services. We offer personalized help in switching from any other tool to ours.

4. Designers and engineers are ready to ditch the image–based design tool paradigm.

When working on the first software version of UXPin, we knew that in order to one day realize our mission of merging design and engineering into one unified process, we cannot follow other design tools. We couldn’t create yet another vector tool.

Vectors keep designer in the world of completely different constraints than engineers, and it’s the tip of an iceberg of problems of siloed design and engineering processes. Different visualization during the rendering process, lack of states of elements and component–level interactions in a design tool, no way to truly test highly dynamic products… the list goes on and on. Vectors were just never created to support dynamic interfaces and hence, cannot serve modern processes.

We needed to create a tool that’s fundamentally different — one that, without falling into traps of Dreamweaver and such, will have a code–based rendering engine.

Yes, UXPin, in basic design actions, may look and behave like our vector competitors. However, whenever you draw something on the screen — we build HTML and CSS behind it. When you add interactions — we create JavaScript. The goal is not to create production-ready code, it’s to keep you within the constraints of real development, while providing the realistic environment for ultra–interactive prototyping. HTML/CSS and JavaScript are all responsible for the magic of UXPin’s accurate rendering, conditional interactions, state-based animations or powerful expressions.

One after another copies of Sketch were gaining some market excitement (rarely traction) and we were wrestling with the browser and complex code.

Things started to change though. With the growth of design’s importance in software development, growth of design organizations and a constant expansion of agile methodologies, companies started to look for tools that scale with the entire product development. Those cannot be based on vectors. After all, vectors push designers to the corner of artists and engineers to the opposite one of builders. This rivalry is not the way to scale anything.

Suddenly, everyone wants a code–based tool. It just so so happens that… this is exactly what we have.

In the last 12 months, you might have noticed that we’re talking way more about our code–based nature on the market and we’re launching more and more features that take advantage of our paradigm. The best part is… those features cannot be recreated any vector tools. We’re escaping the crowd.

Among those unfeasible-for-vector-tools features is UXPin Merge — our technology that imports production React.js components to UXPin’s design editor. All data and interactions included! Merge is currently in private alpha and soon is going to be available to the general public. We could not be more excited. Watch a recording of our webinar held on December 6th.

5. Stick to your mission.

Finally, if you believe in something — stick to it. Eight years ago, there were many temptations to turn UXPin into something completely different. But we stubbornly decided to stick to our original mission of merging design and engineering into one, unified process of software development.

While more than once it seemed crazy, it paid off to be consistent.

Here’s to another 8 years of UXPin! Thank you all for your constant support. We wouldn’t be here without you!

 

This article was originally published here on Medium.

Reflections on UXPin’s 8th Birthday

On November 11th, UXPin turned eight!

Time flies! In 2010 I was 24, working as a UX Manager at a thriving Polish eCommerce company and, after several unsuccessful attempts to start a tech business (the youthful energy!), I took a break from any serious side projects. However, I still wanted to channel my energy towards something productive; 9 to 5 was never really an option for me. Instead of pursuing dreams of a tech breakthrough, I decided to team up with two friends and enjoy exploring the problem that bothered us for years — design — engineering collaboration. Without any business goals in mind, we started to think about helping designers and engineers work better together. The problem was very close to our hearts, we just didn’t know what the solution could be.

Freed from the constraints of a firm idea, we considered multiple options. A workshop or conference? A book? Some sort of software? Physical product? We casted a wide net.

After couple of months of creative explorations, we settled on the idea of… a paper prototyping notepad.

We believed that if designers and engineers could use the same tool, they could find the common ground for collaboration. Paper seemed to be the solid foundation for what we wanted to accomplish. After all, everyone is familiar with paper and can use it for creative purposes. The only issue? Not everyone can draw. Somebody who isn’t comfortable sketching will likely be terrified of sketching in front of others. We decided to eliminate this fear by providing designers and engineers with a set of predefined, generic user interface elements printed on sticky notes. Instead of drawing interfaces you could simply pin (yes! This is why we’re called UXPin!) elements to paper. Anyone can do it!

Early visualization of the first UXPin product. November 2010.

Fast forward a couple of months of prototyping and testing our tool, searching for the right manufacturer and waiting for the production to finish — on November 10th (one day ahead of schedule!) we were ready to launch UXPin!

Well… almost ready.

The one thing that we were missing was our… website. Ridiculous, taking into account that, in this entire project, building a website was the one thing that we felt really comfortable doing. We had no experience building physical products, but building a website? We certainly knew how to do that. And perhaps that’s why we left it at the very bottom of our list of tasks. To launch on 11th, we had to fix this mistake… and fast.

On November 10th we pulled a true all–nighter. We started designing and coding after our full–time jobs and finished at 4am. The first version of uxpin.com was the most impromptu thing that we’ve ever created. Once the website was ready, we had to wait until sunrise to take pictures of our notepads. After all, people had to see the product! I remember moving my desk as close to the window as possible to catch the first beams of sun. We were exhausted.

The original UXPin Website. November 11th 2010.

After all this hard work, our approach to the launch was as simplistic as it was anticlimactic. We announced UXPin on Twitter.

Our marketing was unbeatable 😎 . First tweet about UXPin.

We got our first order 2 minutes later. Another followed 5 minutes later… 48 hours in and we were completely sold out, deprived of sleep (massive adrenaline rush!) and unsure what actually happened (and how!). Over 400 notepads sold in 48 hours in dozens of countries. UXPin became the talk of the design town.

First UXPin pictures. Definitely worth waiting for the sun!

Some months later, All Things Digital — A Wall Street Journal tech publication, published an article about UXPin (likely the first “startup” from Poland covered by WSJ). A year later, we had turned our notepad into a SaaS application and raised our first round of funding. Soon, awards for the best startup in Central and Eastern Europe and even MIT 30 under 30 statuses followed. There was a rapid growth in number of designers and engineers using UXPin all over the world. This led to the decision to move part our business to Silicon Valley and learn to take this unexpected success even further. After months of fundraising we became one of the first Polish companies to raise capital in Silicon Valley and established our second office in Mountain View.

The legend of the web — Chris Messina was an early adopter.

Much growth, many changes, successes and failures later… here we are today. Almost everything is different. Design is more important than ever and UXPin is among the leaders in the design tools market. Thousands of companies, including world leaders of tech, automotive, finance and entertainment, rely on our platform.

One thing did not change, however: we’re still on the mission to merge design and engineering into one, unified, product development process.The task that emerged from our passions in 2010 pushes us to innovate still, 8 years later. We’re chasing the ideal software production process and that may never change. Perfection is impossible to reach, but always worth fighting for. That’s why our mission is so broad and ambitious — to push us beyond the limits of our abilities and discourage ever slowing down.

One thing did not change, however: we’re still on the mission to merge design and engineering into one, unified, product development process.

These past 8 years were nothing short of amazing. We met and teamed up with some exceptional folks (our first engineers are still with us!) and stormed through both joy and pain — always getting stronger. The experience of maturing together with your team, product and market is something that I’m going to be forever grateful for. Thank you!


Our exceptional team is always at your service! This article was originally published on Medium here.

Join the world's best designers who use UXPin.

Sign up for a free trial.

How to Quickly Animate a Photoshop Mockup Into a Prototype

Moving a user from one place to another in your app shouldn’t be like an afternoon stroll with no particular destination in mind. There is a goal for both you and your users. And you’re trying to move them as effortlessly through your app as possible.

With that, you’ve likely mapped out as many potential flows for your users. You’ve likely even mocked them up visually in Photoshop. But it’s not enough to create a series of static screens to illustrate a flow — say filling out a contact form — then expect them to work.

You’ll want to see it in action. In this post, we’ll show you how to create an interactive user flow so you can give it a test drive.

Continue reading How to Quickly Animate a Photoshop Mockup Into a Prototype

Animations & Interactions in Design: Creating a Fading Navigation Menu

Arguably the most popular type of mobile navigation is the type that appears on demand: Tap an icon and site-wide links appear. But just making them suddenly appear is boring. It lacks panache. Great navigation has a hint of animation that gives the links context — they’re not just things that appear out of nowhere. They’re hidden just out of sight, ready to help users get around when the need arises.

Fly-in navigation demo

Today we’re going to show you how to build a fading navigation that flies in and out on mobile without writing a single line of code that’s sure to wow stakeholders.

1. Build the framework

Log in to your UXPin account (or start a free trial) and let’s get started. Then find and drag out the following elements:

  • iPhone bezel, black
  • FontAwesome “reorder” icon
  • FontAwesome “remove” icon
  • Page title (36pt Rock Salt)
  • Background image (in focus)
  • Background image (blurred)

We suggest you name each element as you create it — you’ll thank yourself later. To do so, tap the “i” icon at the top of the options menu whenever you tap an icon.

2. Create the background

This prototype uses the background images in smart elements so we can reuse them later. Whether you choose to follow suit or not, drag in two versions of the background image: one in focus, and one blurred. Arrange them in the canvas so the in-focus image is on top of the blurred one. Finally, select the phone bezel and move it to the front.

Set up background

3. Create the navigation links

Add navigation links (home, appetizers, entrees, etc). To add text to a box, double-click on its center and start typing.

Create nav item

Color each box and add a little padding. Change the typeface and size as you see fit — in this demo we used 24px Maven Pro. You can make each link the same color, but in this demo we used:

  • #cf1000
  • #d82300
  • #e43b00
  • #f05301
  • #fa6801

4. Finish the interface

Add the title (36pt Rock Salt, in this case) and the open-navigation “hamburger” icon.

Set up the rest

Place the close-nav icon on top of the open-nav icon, then hide it with the layers palette.

Add and hide the close icon

Shrink the navigation links to fit under the phone bezel’s right edge, and use the “eye” icons in the layers palette to hide them.

Shrink the nav items

5. Create an advanced animation

The fun begins with the custom animations editor. Add an action to the navigation trigger: advanced animation. “Step 1” represents the state that the animation will reach upon completion. This is the point at which the navigation should be fully revealed, the background blurry, and the “hamburger” icon changed to a “X”. To start all that, reveal and expand the navigation.

Animate the open-nav action

Set each navigation link to appear 50ms after the last. For example, “Appetizers” begins at 50ms and “Entrees” begins at 100ms.

Set nav item timing

Now for a little switcheroo. Hide the open-nav icon and show the close-nav icon. Then hide the focused background and show the blurred background.

Change background and icons

6. Fix the order

Finally, make sure the phone bezel is the above the navigation links, but below the open/close icons. This ensures that the navigation links only appear in the app’s working area, not over the phone itself.

Move the bezel up

Then try it out! Advanced animations are a powerful way to give interactions a little pizzazz. To set yourself up for success, though, we suggest that you name elements as you go, pay attention to their layer orders, and don’t be afraid to experiment. Hope you enjoyed this tutorial. Now play with UXPin on your own!

Iridies and User Experience Blossom in Spring.

User Experience blossoms in spring
Photo Credit: Chris Willis

This spring we’ve been quite busy with supporting some cool UX conferences and workshops. Our KUDOS to you friends for supporting the whole UX community and delivering such great value and to all the people who attended, showing the strenght in user experience!

Thank you:

If our numbers are right the total amount of attendees in these conferences is circa 3000. So hey 3000 UX enthusiasts, a big thanks to you too! :)

See you next spring!

If you’d like us to back up your conference or workshops, just send us a line a hello@uxpin.com.

5 Dangers of Flat Design

Metro UI Flat Design

To say that „Flat design is extremely popular” is to say nothing. The Flat design took over the design world. Microsoft (since 2010), Google and Apple adapted the flat design to some extent and thousands of designers followed (check out the Flat Design Showcase).

The simple and clear aesthetics of the flat design is easy to recognize and become a brand on its own rights. Some designers though tend to see it as the beginning of the revolution:

„I believe that the flat design trend is a symptom of the growing maturity in the field of web and interface design. This maturity applies to our designers – who are getting better at making interfaces that encourage interactivity and engagement – as well as to our users.” /Marci Ikeler, Designer and Founder of Little Arrows

„In essence, the flat era of design has narrowed the constraints but surprisingly expanded our approach towards design. Skeuomorphic design was not a trend, it was necessary for technology to be adopted. Now that it is, flat design is another necessary step that will facilitate exploration of new design techniques that will take the industry to new heights” /Damian Madray

If they are right, there’s hardly a way back. The flat revolution will unify the digital world under a single rule. Whatever will be in a different aesthetics will be judged as an oddity. While all the big brands are switching to the flat, that view might be truer than ever.

And this is exactly where I see the danger. While I admire the flat design aesthetics I’m afraid that many designers might fall into the trap that will ruin their design ambitions (and life of their users in the same, unfortunate, time). Oh yes… Flat design is tricky. Let me introduce you to 5 obvious dangers of Flat Design:

  1. Forgetting Affordances
    In many cases texture, gradients, drop shadows and other ‘non-flat’ user interface elements hold an important information value. They help to create affordances in the interface. A button that looks like a button brings in the right mental model to the minds of users. That helps them understand the connection between a button and their goal – that’s a highway to interface efficiency.

    If you’re working on a flat design – make sure that you took care of affordances.

  2. Misusing color & contrast
    Flat designs must rely on color & contrast as the indicator of interaction in the interface. That’s not an easy task. Colors got their meanings and lead to certain physiological reactions. To master color as an obedient information carrier – that’s certainly one of the biggest challenges in front of the flat design.
  3. Lacking the beauty of typography
    Flat designs rely on typography as on the primary carrier of aesthetic value and information. That’s absolutely great. Who doesn’t love beautiful typography? Right? The only problem is that typography is the art on its own. Lack of typographic skills will be more visible than ever in a bare flat design.
  4. Poor rather than simple
    Ornaments and any „extra” ingredients are banned in flat design. That’s cool. It supposes to lead to the beauty of simplicity. The danger is though that the interface will look poor and unfinished rather than simple. Creating something beautiful, useful and simple is the ultimate design challenge.
  5. Lost Visual Hierarchy
    Back in the days, designers were really concerned by the visual hierarchy of information that they are forcing on users. Having a full spectrum of effects: shadows, gradients, textures… designers could try to guide human perception of the interface. While it’s still possible in the flat design, it’s definitely harder.

All 5 dangers might be summed up in a single sentence: Flat Design is hard.

And here’s your takeaway – a handy graphic:

Flat Design InfoGraphic

UX Scotland 2013 User Experience Conference

UX Scotland 2013 Conference logo
We have the pleasure to introduce to you UX Scotland 2013: a community-driven practical User Experience Conference in the ♥ of Edinburgh.
Our friends from the UX Scotland conference prepared for you a remarkable event in the remarkable city of Edinburgh. It’s two days packed with UX adventures featuring:

A big thank you to the lovely team of Software Acumen for the opportunity to sponsor this event!

Ps. That’s not the only one UX conference we contributed to this year. A blog post on that soon:)

Hold on to reality: restrain your creativity and your feedback. Part 3.

By Dominik Strzałkowski, UI designer at Macoscope

Bubble Browser - entirely new approach for your Evernote data

FIRST PART OF THIS ARTICLE
SECOND PART OF THIS ARTICLE

How to introduce innovative solutions?

Tip 7: Introduce innovative solutions only in an environment the users know.

Bubble Browser Intuitivenes Graph

Most of our solutions related to the user experience are based on the guidelines developed by Jared Spool. Jared Spool demonstrates how a designer should think in order to create a useful, intuitive product. The main issue that Spool emphasizes is that it is not the design that is supposed to be intuitive – it is the users who act intuitively when using the software. The design has to be thought out in such a way as to help in this matter, and, if the need arises, to inconspicuously train users.

The user’s intuitive activities are an individual issue and, according to Spool, are closely related to two issues:

  1. What people already know when they start using the program; in other words, their entry knowledge;
  2. Previous similar experiences and how do they impact their perception of the application.

Taking into account the fact that the perception of most users is normally limited to what they are already acquainted with, we, as designers, have to predict which elements the users will recognize, and which they will have to be taught.

Jared Spool discerns two types of user knowledge: current knowledge, that is the knowledge a user already has, and target knowledge, the knowledge one needs to use a given program or application at full capacity. The space between them (the knowledge gap) is to be covered by a well-thought-out and intuitive product. Assessing the current knowledge of users, that is recognizing and analyzing their previous experience, can greatly help in the determining of the required target knowledge.

The purpose of this analysis is to minimize the amount of new knowledge that the user has to obtain in order to use the application. Obviously, an ideal situation would be one, in which this comes naturally, and one’s previous knowledge would be employed when using the application. So all the new elements of Bubble Browser 2 had to meet two basic goals: improve the prototype and make use of the elements and environment that the user is already accustomed to. Users can’t start from scratch, and we had to help them navigate through the application with their current knowledge. One of such elements that makes use of this is, for example, the omnifield, a text-based query box at the top of the screen similar to that in which users type in website addresses or submit queries in Internet browsers. We made the assumption that users will quickly understand the principle of the omnifield by analogy to similar solutions. An additional element that supports this connotation is the use of the term “browser” in the program’s name itself.

Bubble Browser omnifield Screenshot
Fig. Omnifield Screenshot

We considered three elements of the UI as relatively well-known and facilitating the use of our app:

  1. The omnifield for browsing, an element known from internet browsers.
  2. Thumbnail previews of note content.
  3. Note content presented in a linear way common in browsers, word processors, and Evernote itself.

Bubble Browser bubble screenshot
Fig. Bubble screeenshot

The use of accessible elements in an environment that users were acquainted with allowed our innovative use of bubbles to browse data to be a straightforward means of conveying information and facilitating navigation for those, who haven’t used Bubble Browser previously. In this way, even more so than in version 1.0, we created an accessible environment for learning how to use the application efficiently and intuitively.

Evaluation

Tip 8: Analyze application reception and its assumptions.

On the 21st of March, the newest version of Bubble Browser was made available in the Mac App Store. Of course, mistakes were made, both in the application itself as well as in the work process. But we handled them promptly with a frank and direct attitude that allowed us to complete work without significant delays. We believe that the system of extensive limitations we imposed allowed us to develop an efficient way of delivering a product with a limited number of people on the design team without any holdups and without overinvesting.

As we care about feedback and how people evaluate our software, we would like to hear from you. Take our app for a spin and let us know what you think. We would like to verify whether our assumptions work in practice and whether the aesthetic and functional minimalism allows for intuitive use of the software.

END OF THE THIRD (LAST) PART

FIRST PART OF THIS ARTICLE
SECOND PART OF THIS ARTICLE