Category Archives: User Interaction Design

25 Magazine or News Style Web Designs for Inspiration

As the media news sites  – and their print-media-related cousins – struggle to find out how to become profitable without dying in their intent, most news sites follows a traditional formula, by putting in first place their websites, second their mobile versions and last all their related social media affairs. The truth is no one has find the all-in-one formula to overcome this massive fight. But since, as, designers, part of our job is to create sites that works for our clients, sometimes we must do more research job to find how to make it a little more succesfull than the ones they replace.

This selection of good samples, updated by the moment, is meant to give you a general picture on this, helping to ironing any issues you might find and helping to orientate yourself on this hard choice.

With more websites and blogs publishing large amounts of content on a daily basis, one of the priorities in designing these types of news sites is to create a layout that allows visitors to find the content that they are looking for. The more content that is published, the bigger the challenge this becomes. Many sites and blogs are turning to magazine or news style layouts to display excerpts, headlines, and links to full content.

Most magazine-style sites include image thumbnails for some or all of the excerpts, and many also category those excerpts to make it easier for visitors to find specific content. If you are working on a magazine or news style layout this showcase of 25 websites should help to provide some inspiration.

This is Fake DIY

Billboard

Conde Nast

The Next Web

W Magazine

Spin

The MMQB

The Daily Beast

Newsweek

The Blaze

Vogue.co.uk

The Fiscal Times

Walker Art Center

This is Awesome

Esquire.co.uk

Melbourne Geek

Time

Quartz

VanityFair.fr

Elephant

Livestrong

.net Magazine

The Boston Globe

Clutch Magazine

Tennis.com

In the examples of content-rich websites that follow, you’ll see many of these best practices applied effectively in order to maintain an enjoyable, friction-free experience.

POLYGON

http://www.polygon.com/

What is it?

Polygon is a videogame review site from the founders of gadget-enthusiast upstart The Verge (also profiled here).

Why we like it

  • Whitespace – Polygon’s articles feature long-scrolling, untraditional layouts that break up the dense bodies of text into digestible chunks with huge, beautiful imagery, akin to custom-designed magazine spreads. Here, the content in each article has been intentionally laid out, instead of simply “pasted & posted” into a one-size-fits-all template.
  • Strong information hierarchy – Dramatic-looking pullquotes highlight the core points of the reviews.
  • Usable search – There’s an impressive realtime search bar that’s sticky at the top of the browser window, enabling quick drilldown on specific games.

THE VERGE

http://www.theverge.com/

What is it?
As the new kid on the block that’s populated by the likes of Gizmodo and Engadget, The Verge is taking a fresh, bold approach to covering the wide world of technology.

Why we like it

  • Story collage – The homepage begins with a big, colorful jigsaw puzzle of leading stories’ headlines, providing a glimpse into the articles they link to, as well as a strong visual draw for the eye.
  • Thumbnail sliders – At certain points, the pages are broken up by a useful carousel of image thumbnails, each allowing the user to drill into a specific story.
  • You Need To Read This Now – By giving its top stories a bit of whitespace and accompanying them with an explicit directive, The Verge is able to focus attention on the hottest news it has to offer.

CONDE NAST

http://www.condenast.com/

What is it?
Being the parent company of many of the best-known magazines around (including a couple we’ve featured here), almost makes Conde Nast’s site genetically predisposed to offer a mountain of content that could easily be overwhelming if not approached with caution, forethought and disciplined design.

Why we like it

  • Bold visual hierarchy – Beginning with the absolutely giant, beautiful content slider in the header of this site, there’s literally no way you could miss what Conde Nast believes are the most important things for you to see on this site.
  • Customizable Filters – This site wisely avoids attempting to present all of the available content, and instead puts control in the user’s hands by enabling them to filter down what they see based on their specific interests.

BLIK

http://www.whatisblik.com/

What is it?
Blik is one of the biggest destinations around for art supplies, and with such a diverse range of media and materials to accommodate, it needs to ensure that its creative audience can quickly find the items they need when inspiration strikes.

Why we like it

  • Strong information hierarchy – You’re never in any doubt as to what the most important thing is that you should be looking at, especially while browsing the products which follow many of the best practices for an ecommerce product page.
  • Grid style – With a kaleidoscope of colors, shapes, lines and patterns inherent to their wide range of products, keeping a clean, rigid grid structure helps impose a sense of orderliness upon what could be a chaotic mess of visual elements.
  • Dynamic mouseovers – Blik allows the user to indicate interest in an item by providing more information in a dynamic hover state, instead of unnecessarily cluttering the resting state of the site upfront.

USA TODAY

http://www.usatoday.com/

What is it?
As one of the largest newspapers in the US, USA today knows a thing or two about managing a large amount of content in a limited space.

Why we like it

  • Clean, organized grid – The clean, sharp lines and rigid layout of this design maintains an orderly feel to this site, which keeps it from feeling disorganized or difficult to navigate
  • User-adjustable layout – USAToday offers visitors the choice between a List or Grid view of their top stories. This allows users to control how much they take on at once – allowing them to effectively choose their preferred approach to browsing the content.

THE NEW YORKER

http://www.newyorker.com/

What is it?
The venerable publication famed for its satirical cartoons brings a stately approach to presenting its content online.

Why we like it

  • Masonry – The New Yorker’s homepage echoes the trend of the cascading, tiled content block layout that keeps the user scrolling down, scanning for items of interest.
  • Variety – There are a wide range of image sizes on offer in this layout, which prevents monotony setting in while browsing through.
  • Minimalism – The overall aesthetic here is clean, structured, and minimalist that lets the content speak, while using the New Yorker’s signature font throughout.

AIGA

http://www.aiga.org/

What is it?
The national professional membership organization for the graphic arts, AIGA has its hands in many avenues of outreach for its members, including conferences, perks, publishing and more. In this instance, presenting their overwhelming amount of available content in an effective way meant exploring outside the traditional layouts of similar organizations.

Why we like it

  • Grid style – The grid size of each article is proportional to the amount of information it contains, giving visitors an instant visual representation of importance – and time commitment.
  • Consistency – Despite covering a profusion of different design styles, typography and color schemes in its imagery, the actual site retains a solid consistency in terms of how it displays captions, headlines, article content, etc.
  • Strong information hierarchy – Each article offers the same Title/Subtitle/Excerpt structure. Articles of special importance remain fully saturated, instead of the secondary posts, which are more muted, and only come to life on hover.
  • Buttons – Non-rectangular buttons punctuate this layout, noticeable by virtue of their shape. These calls-to-action are nicely styled and stand out just enough to catch attention.

A LIST APART

http://www.alistapart.com/

What is it?
One of the de-facto bibles of designing for the Web, A List Apart publishes daily, thought-provoking articles on the finer points of our craft. This is deep, thought-provoking stuff, so a usable interface and pleasurable reading experience are paramount.

Why we like it

  • Clean & simple typography – ALA’s design is well-known in the Web design community for microscopic attention to detail when it comes to the typography on the site. Each line, heading and pull quote is fastidiously and consciously adjusted for perfect readability.
  • Disciplined editing – Despite the length of ALA’s articles, you’ll notice that there aren’t any overly-long sections of content. Each post has been carefully broken up into easily-digested paragraphs of 2-3 sentences each.

THE BLACK HARBOR

http://theblackharbor.com/

What is it?
A showcase of art spanning an eclectic variety of styles from the artist collective I Shot Him Because I Loved Him, Damn Him.

Why we like it

  • Rigid grid – Each article is represented on the homepage by a moderately-sized photo, all presented in a clean grid layout, to prevent visual confusion, given the variety of colors, styles and subject matter to be accommodated.
  • Content reveal – Simply displaying the descriptions and captions of each picture underneath them adds content bloat – instead, The Black Harbor only reveals this information as an overlay when the user indicates interest by hovering over an image. In addition, when users hit the bottom of the homepage, they’re given the opportunity to reveal more content.

EBONY

http://www.ebony.com/

What is it?
One of the best-known magazines for Black-American articles, opinion and insight, Ebony covers an incredibly broad number of topics in its mission to share the perspectives of the African-American community.

Why we like it

  • Giant imagery – Much like Polygon’s fine example, Ebony uses striking and large images to not only set the tone, but also give users strong implications as to the most important articles on their homepage. Their homepage slider alone takes up the vast majority of the screen on laptop resolutions and below.
  • Bold typographic hierarchy – Ebony’s signature headline font, Didoni, serves to call out the major articles on the site at the present moment, with secondary stories headlined in “Trade Gothic”.

WIRED

http://www.wired.com/

What is it?
The original home of pan-genre tech and geek journalism, Wired covers a breathtaking variety of detailed content – making accommodating it all comfortably on their website quite the achievement.

Why we like it

  • Readability – Clear sans-serif type, and comfortable column widths keep things simple and easy to read.
  • Consistent typography – All headlines, quotes and other text content elements are cohesive across the sprawl of this site.

BOSTON GLOBE

http://bostonglobe.com

What is it?
This widely-reknowned newspaper caught the attention of the Web last year, when they rolled out a major site redesign – one of the first mainstream sites to embrace responsive design methods.

Why we like it

  • Whitespace – Being a newspaper, by far the most important content is the text, meaning that careful attention has been paid to ensuring a pleasurable reading experience
  • Visual hierarchy – Articles with an image are more attractive – and therefore more important – than those without. This rule is further emphasized by the size of the accompanying image, with the leading story having significantly more space devoted to it.
  • Hidden content – The leading stories in each news category are smartly hidden in the mega-menu, which is revealed on hover

CO.DESIGN

http://www.fastcodesign.com/

What is it?
Fast Company’s design blog showcases all the latest goings-on in the world of product and graphic design. Needless to say, there’s a lot going on in those areas these days…

Why we like it

  • Giant imagery – Each article is accompanied by a truly massive header image that lets the reader know in no uncertain terms just what they’re about to read.
  • Intro sliders – Many of Co.Design’s articles open with an image slider containing key images from the body of the article. They serve as an excellent visual intro for the text that is to follow, and get the reader primed for the overall tone of the article.

THINK QUARTERLY BY GOOGLE

http://www.thinkwithgoogle.co.uk/quarterly/index.html

What is it?
Google’s quarterly publication with their musings on the trends and movements of the Web is a surprisingly refreshing reading experience coming from a company with a reputation for deeply-entrenched engineering background.

Why we like it

  • Whitespace – The whole layout of this site feels crisp, fresh and open. Type is laid out for maximum impact, instead of content density.
  • Overlays & reveals – The index of this online magazine is very nicely done, with thumbnail activating a huge, stylish pull-quote and link to the article upon rollover. Approaching the reveal in this way also allows the reader to continually return to the central theme of the issue.

Wrapping it up

Make no mistake – none of these examples successfully navigated the minefield of creating a content-rich website by accident. It takes a ton of time, strategy and deliberate planning in order to not only execute these designs, but also ensure that future content updates fit flush within the overall user experience. Therefore, it pays to keep the following guidelines in mind:

Prioritize – When everything’s important, nothing is. You should clearly establish what content is required by the user up-front, and what can be hidden. Once you’ve figured that out, make that hidden information easy to find when needed.

Semantic Categorization – Categorize your content in a way that makes sense to your user – not to you, nor your client, nor your colleagues. Be ruthless in identifying and eliminating internal jargon and acronyms that you toss around in a usual day at the office.

Design Consistently – Keeping all your elements, typography and spacing consistent across the whole site takes on a whole new level of importance when taking on a content-rich site, not only for the users’ sakes, but for minimizing future maintenance headaches. For example, keep related image assets all the exact same dimensions, so they can be reused seamlessly across the site.

Make user flowcharts – Chart the journey of different groups of visitors through the site. Challenge yourself as you’re designing to answer common questions, or consider how you would accomplish typical tasks that a new visitor might have within your proposed site structure and page layouts.

Vía Vandelay Design

#innovationMatters el Huawei Mate 10 se convierte en PC sin necesidad de un Dock

Después de que microsoft anunciara de manera no oficial – a través de un tuit de una de las mentes detrás de Windows Phone – y por ende, una de las más fuertes apuestas que pretendían hacer de los smartphones equipos PC completos si se adquiría un Dock para añadir teclado y mouse, Huawei derrota a todos ellos creando una opción altamente efectiva en su Huawei Mate 10 para tener una PC completa en nuestro bolsillo y sin necesidad de invertir un clavo.

Lo mejor de su apuesta, es que con solo conectar nuestro Huawei 10 a un monitor a través de un cable especial y el mismo smartphone servirá de touch pad y de teclado, practico pero simple y efectivo.

Un simple cable USB-C a HDMI nos permite entrar en este PC mode de modos que con la oferta de Microsoft con Continuum y de Samsung DeX implicaría una inversión de algunos duros más y que con Huawei se obtiene sin costo – sólo el del propio cable – y cuyo costo anda en unos 10 dólares o su equivalente en moneda nacional.

Durante años se ha hablado de esta convergencia y la verdad es que sería una maravilla tener un PC competente en nuestros bolsillos – la verdad el modo PC en muchos dispositivos aún es más creativo que útil – y poder usar el poder de terminales móviles como el iPhone X como una PC completa y poder usar sus maravillosas apps en una pantalla más cómoda para el trabajo – y soñando un poco, con un teclado y ratón bluetooth que haría las cosas más cómodas y lo pondría al nivel de una MacBook Pro – lo cual es evidente aún es lejano pero una empresa que innove en esa dirección apuesto que daria un enorme impacto en el modo cómo usamos nuestros smartphones – y justificaría invertir 26,000 pesos mexicanos en un iPhone X o equivalente – para que podamos usarlo como una máquina de desempeño y un smartphone en el mismo paquete. Maravillosa idea, ¿no lo creen?.

Vía Xataka

Mobile UI Interactions

When presenting an app concept, storyboards and screenshots alone cannot fully drive the message home. If you want to capture your potential clients’ attention, showcasing your mobile app concept in GIF animation will make it more realistic, dynamic, and engaging
 This article is all about UI mobile app animations!

Below is our list of a few animated examples of UI mobile app animations that will surely inspire you to do the same next time you present your app concept to your client.

Speedcam App Animation by Jakub Antalík for Sygic.com

This speedcam app in GIF is simply impressive

Undeniably, Jakub Antalik has successfully presented his speedcam app in action in this GIF. Its nice colors and smooth animation simply make it impressive. Jakub Antalik created it in After Effect, imported it in Photoshop, and exported it as a GIF.

Weather Rebound by Chris Slowik

How you view weather will never be the same with this app

What an impressive weather app, without question. Kudos to Chris Slowik for this awesome work! Chris Slowik removed its current weather icon from the ‘window’, hence, you can’t see an icon when you look at it.

Curl by Nicolas Girard

If this app won’t get you to exercise, what would?

Health buffs out there may say that the model in the app’s GIF displays a wrong form for bicep curls. But, hey, there is no questioning that this app concept is simply awesome! Nicolas used 3DSMax for the armband module and did everything else using After Effects.

GIF – Workflow Payment by Barthelemy Chalvet for AgenceMe

Welcome to content that moves!

If you are not a fan of content that moves when the screen is rolled, then you may think that this app is not cool at all. However, if you have no problem with such, you’ll surely agree that this work of Barthelemy Chalvet is awesome. Its animations are really nice, appearing undeniably fluid and fast. The GIF focuses on a payment procedure that does not only look neat but handy, too.

FaceScan App by George Frigo

Get the latest information about your favorite celebrity just by scanning their photo

This animation only lasts for 12 seconds. Nonetheless, it is already pretty obvious what it is all about. This concept formed from George Frigo’s desire to establish a similar application that makes it possible for Internet users to obtain information by using a photo of a person, whether he’s a celebrity or just an ordinary citizen.

WIP Discover Music app by Alexander van Ravestyn

Discover music in an interactive way with WIP Discover

As its name suggests, it is pretty obvious what Alexander van Ravestyn wants to direct users’ attention towards the process of navigating: a slickly designed screen with a music player. This IOS app focuses on discovering music in a rather interactive way. There is no denying that it is simply awesome.

Walkthrough Animation by Devin Ruppert

Walkthrough has a series of dynamic slides and buttons

The GIF of Walkthrough by Devin Ruppert highlights a welcome screen featuring a slider with numerous dynamic slides and a panel featuring login buttons. Everything about this app is brought to life so that what you can expect from this app can be effectively showcased. Great work!

 Interaction Overview by Mihnea Zamfir

An app that is designed to make life simple

Despite being concise, there is no denying that this animation is effective in showing a client a simple procedure of adding and deleting entries from a card directory. Now, talk about simplicity, beauty, and efficacy all rolled into one!

Delete Task and Assign Task to Your Teammate in Action by Tobs

Never miss a task with this app

The GIF is targeted at demonstrating swipe technique in action that is not only common but effective, too. The whole thing simply looks alive, conventional, and engaging! What a great way, indeed, to delete and assign a task to a teammate in action. The animation was done in After Effect as well.

Menu Interaction GIF by Ben Dunn

A stylish app with a stylish design

This work by Ben Dunn, without question, is an impressive tool for showcasing the appeal of a standard menu in action, sliding out from the left side elegantly as it presents the important links. Don’t you just love the way how icons pop up from the left side?

Showtime App by Luft

Want to know where the hottest place in town is? Showtime will lead you

This app by Luft is the most ideal for the weekend nocturnal creatures who are constantly in the lookout for a nice place to paint the town red. The only problem about this app is its right button color which makes it less readable. With this app, it’s show time, indeed!

iOS 7 Animation by Fabio Basile

A fun and fancy app for iOS 7

This app is, obviously, a result of the freedom of Fabio Basile to have fun with animations and fancy interactions. Without question, this is way better than those horrid settings trays that people use.

Life Minimal App by Budi Tanrim

Hard work resulted in an impressive app

This app by Budi Tanrim is one great example of an app with impressive transitions and visualization. With the help of PSD, After Effect, and 12 grueling hours of hard work, this animation came into existence.

Weather by BeardChicken

Weather lives up to its name and the animation makes it even more interesting

Is the weather outside frightful? Well, just imagine how fun and easy and checking the weather will be with this weather app by BeardChicken. This work is simply elegant!

Account by Barthelemy Chalvet for AgenceMe

Awesome transitions – that is how you describe this app

You can’t help but admire the transitions of this app, although some people think that it gives them motion sickness. Others observed, though, that the text is too small. Whatever your take on this is, there is no denying that it simply looks awesome!

Covert Inbox by Creativedash

This app puts Photoshop CS6 to good use

This app clearly demonstrates what happens when you are tapping on something and you get a new message. Its animations and details are simply incredible.The GIF was created with the use of Photoshop CS6.

Soccer Analytics by Monterosa

Keeping up with the latest news in soccer is much more fun with this app

This app by Monterosa is a must-have for every soccer aficionado. The graphics are awesome and the animation is simply amazing.

Tour by Mark Geyer for Salesforce UX D

Discover your pace without an y pressure with this app

This is an onboarding tour concept for Salesforce1. The users would be able to swipe through the tour at the pace of their choice before diving into the app. The animations are just as impressive with the other apps listed on this list.

Loading Animation by Nicolas Girard

This is an Iron Man-ispired app

Mind blowing animations that simply awe. Nicolas created it for Commongood.TV. Iron man-inspired? Hmmm…

Photo Navigation Concept by Chapps

Save, retrieve, and access images easily with this app

This app is based on the concept that, in just a few clicks, the user can already get the necessary images that have been added and tagged earlier. With just one touch, you can choose the category that you want or need. The whole process is reminiscent of an image search on a desktop, only it is done in a mobile device.

Fiche Workflow Payment by Barthelemy Chalvet for AgenceMe

A great concept fo a payment card

This is definitely a gorgeous app. A great concept for a payment card, indeed!

Map Pin Bubble by Ben Cline for RALLY

A map app with a refreshing design and concept

Oh, the secondary bubble simply look slick. Commenters refer to it as ‘design with life’, thanks to its riveting animation. This app makes use of Map Box API. Without question, it is a refreshingly unique approach to iOS map callouts.

Menu (Animation) by Nest

Neat and simple – that is what this app is all about

You’ll surely love the neatness and simplicity of this app. Its transitions are simply awesome. Everything about this app is done in AE.

First Shot by Plady

The design and color palette used in this app shout simplicity and fun

Another app that oozes not only with an impressive concept but great animation, too. Now, can you imagine how exciting Dribbble can even become if it adapted this concept? Plady used Photoshop for this great work.

Exercise Screen by Vitaly Rubtsov for Yalantis

Workout tracking becomes easy with this app concept

Are you a health buff? Then, this app concept will surely be in your good graces. This GIF showcases a little of its set interaction. Hopefully, this concept can be fully actualized as it can surely make workout tracking a piece of cake. Just be careful, though: you might end up spending more time playing with it than exercising!

Animated Sliding Tab Bar by Virgil Pana

There’s no denying that the 3D fold effect of this app is simply awesome

This concept is simply smart as it can be of help on devices that have small screen size. Its drag handler is close to the edge of the screen for the bounding box because the action is limited. Nonetheless, the 3D fold effect is just cool, isn’t it?

Conclusion

Both UI and UX developers have recognized the importance of animated pictures in presenting their ideas that are a result of their painstaking work and inherent artistry. With GIF animations, the usually irritating and time-consuming procedure of explaining to clients can be averted.No matter how wonderful the screenshots of app concepts are, only short and fully animated GIFs can convey and demonstrate the interaction between all of the vital components in a more alive manner.

Vía 1stWebDesigner

Prototyping mobile UI animations: 5 inspiring examples

How to create mobile UI animations that boost usability and bring app interfaces to life

Animated transitions can make the difference between a great mobile app and one that’s just meh. Transitions — those little animations that make UI elements visible or invisible — often go unnoticed, but when executed right they contribute to a seamless user experience. So what makes a good animated transition and how can prototyping help?

What are mobile UI animations for?

Animated transitions signal a change of state to the user. That can mean signalling a movement in the navigation flow, task completion, introduction or subtraction of on-screen UI elements, and changing position in the interface hierarchy. Designer Davey Heuser helpfully explains animated transitions in terms of movie sound-effects: “It’s not peculiar to use animations and sound effects in movies when someone goes through a time machine, so it’s only natural to use this in your interface as well.” And that’s where animated transitions come in handy.

“It’s not peculiar to use animations and sound effects in movies when someone goes through a time machine, so it’s only natural to use this in your interface as well.”

What makes a good mobile UI animation?

Software developer and UX influencer Nick Babich succinctly defines what separates a good animated transition from a bad one in his post Animation in Mobile UX Design:

Effective animated transitions:

  • Have a clear purpose
  • Reduce cognitive load
  • Establish spatial relationships
  • Prevent change blindness
  • Bring an interface to life

Badly designed animated transitions, on the other hand:

  • Confuse the user
  • Complicate the interface unnecessarily
  • Are random and without purpose

Animated transitions can make mobile UIs more dynamic, engaging and user-friendly. But use them incorrectly and they will have a detrimental impact on both user experience and conversions.

Our list of 5 inspiring mobile UI animated transitions provides top examples of mobile animation, plus we’ve thrown in some expert prototyping tips to help you test out animations in UI prototypes. Enjoy!

1 — iOS camera app focus animation

Predictably, Apple’s iOS Camera app includes a stunning example of well-executed mobile UI animation. As users attempt to focus the camera, a crosshair appears — with a fade-in effect — and shrinks as it finds focus. Once focused, the crosshair blinks in and out of visibility and then fades out.

Check out the video to see the animation in action.

Create something similar in a mobile UI prototype using Justinmind’s animated effects. Effects are triggered when a UI elements is shown or hidden — you can choose the style in which to reveal the element from fade-in or out to bounce, fold and puff.

2 — Template gallery menu animation

Sergey Valiukh from Tubik Studio has come up with an animation that converts a standard contact list into an interactive, engaging experience. Users scroll through their contact cards with a vertical swipe gesture that causes each contact to move forwards, then drop out of sight when dismissed. The animation effectively focuses user attention and uses information hierarchy to good effect.

You can build a similar effect in Justinmind mobile prototypes by using dynamic panels to create transition effects. Link the transition effects to gestures and then test on the prototype on your mobile using the Justinmind app.

3 — Weather Rebound app

This mobile app prototype from Chris Slowik incorporates sophisticated mobile animation that both delights and informs. Not only has Chris incorporated a transparent animated skin that matches the current weather conditions (which we love!), but he’s also built animated his UI elements simply and beautifully. On command, hourly weather icons slide up onto the screen; a lateral slide-bar menu allows users to select the day they need the weather report for. It’s simple but beautifully executed, and allows users to see weather throughout the day at a glance.

Chris has used his own brand assets as the icons for the weather app, but if you’re short on time you can take advantage of the pre-made UI libraries in Justinmind: there are UI elements for all main operating systems and devices, which you can organize into groups and reuse across projects. Or import your own brand assets as SVG files and make them interactive with Hotspots.

Check out some examples of mobile UIs made with our Android Lollipop UI elements.

4 — Elastic progress bar

Mobile users have very., very little patience for slow loading times. According to Kissmetrics, a 1 second delay in page response can result in a 7% reduction in conversions. Mobile animation is a great way to make the wait seem shorter and lower user abandonment rates. UI designer XJW nailed a download loading progress bar and shared it on Dribbble. The animation starts out as a download icon, which transforms into a button moving along an elastic tightrope wire and marking the percentage completion of the download. If the download fails, the progress button fails off the wire. A cute, personality-filled way to convey progress through mobile animation.

5 — Fitness Tracker — Pull Down to Refresh

One of the most common mobile animations is the so-called Pull Down to Refresh, where users refresh screen content by swiping vertically downwards. It’s become an intuitive feature for mobile users, so conveying that the gesture is recognized and being executed is crucial to seamless user experience.

That doesn’t mean that UI designers and prototypers can’t have fun animating the gesture, though. Take Fitness Tracker’s prototype, in which they use the Pull Down to Refresh feature as an opportunity to strengthen the brand while conveying functionality. Instead of introducing any old loading wheel, they add an animation of a character power walking across the top of the interface. It’s simple, good-looking and reinforces the ‘why’ of Fitness Tracker in the user’s mind.

The actual refresh button backs this up with its own great animation. The yellow gradient thumb spot fades in, sweeps down and then explodes out of sight, supporting the dynamism of the UI as a whole.

You can use rich interactions to create this Pull to Refresh button in Justinmind, and add conditions to your event to make it even more advanced. Add animated effects to the event to make the animation richer.

Prototyping mobile UI animations: 5 inspiring examples — the takeaway

Animated mobile transitions can be charming, useful and user-centric. They guide users through a mobile app experience and ensure that both user goals and conversion goals are catered to. But mobile UI designers have to resist the temptation to animate for mobile animation’s sake. Animations should always be relevant, targeted and with a purpose. That way, your UI will be as effective as these inspiring examples of animated mobile transitions.

Vía Justinmind blog

Visores de Realidad Aumentada Mixta de Windows 10 estarán disponibles a partir del 17 de octubre

La batalla por la realidad aumentada esta a todo lo que da, y aunque aun los ganadores están muy lejos de definirse, las grandes compañías no dejan de lanzar ofertas para atraer a los “early adopters” que deseen probar estas tecnologías. Microsoft planea lanzar el 17 de octubre de este año sus visores de realidad aumentada mixta como parte de su actualización de su Fall Creators Update, y se espera que los fabricantes que se sumaron a su iniciativa tengan sus aparatos listos para esta fecha. El precio de entrada que estableció Microsoft en la linea de los 300 dólares como precio de salida aunque el resto de los fabricantes han dado precios muy diversos a sus aparatos. Los visores de HP, Dell y Lenovo por ejemplo, tienen precios anunciados de 350 dólares y en paquetes con controles de movimiento 450 dólares. Aunque esto es irreal puesto que la mayoría del software no tiene sentido sin el uso de estos controles.

Todos los visores tendrán pantallas de 1440 por 1440 pixeles por ojo y una tasa de refresco de 90hz, y a diferencia del HTC Vive y el Oculus Rift no necesitaras sensores adicionales puesto que contaran con un rastreo espacios “inside-out” que fue desarrollado originalmente para los HoloLens.

Un punto a tomar en cuenta, y que llama la atención en exceso, es que a pesar de que la tecnología es una verdadera innovación, los precios han sido marcados como un poco altos, y podrían ser más bajos si se desea bajar los costos a un limite aceptable. El Oculus Rift ahora esta a solo 499 dólares e incluye sus excelentes Touch Controllers, es más, a inicios de año el paquete de visor y controles de Oculus Rift bajo hasta el rango de los 399 dólares . El HTC Vive, también bajo su precio a solo 599 dólares aunque para tener el combo completo se requeriría una inversion mas.

 

Lo que requiere en equipo la version de desarrollo de los visores Windows 10 Mixed Reality es algo así:

Operating systems
Windows 10 – Creators Update (Developer Mode enabled)

Processor
Desktop: Intel Desktop i7 (6+ Core) OR AMD Ryzen 7 1700 (8-Core, 16 threads)

Graphics GPU
Desktop: NVIDIA GTX 980/1060 | AMD Radeon RX 480 (8GB) equivalent or greater | DX12 and WDDM 2.2 capable GPU

Graphics drivers
Windows Display Driver Model (WDDM) 2.2

Thermal design power
15W or greater

HMD connectors
HDMI 1.4 or Display Port 1.2 for 60 Hz HMDs
HDMI 2.0 or Display Port 1.2 for 90 Hz HMDs
1x available graphics display port for HMD

Resolution
SVGA (800×600)

Bit depth
32 bits of color per pixel

RAM
16GB or greater

Storage
>10GB additional free space

USB
1x available USB port for HMD
USB 3.0 Type-A
Note: USB must supply a minimum of 900mA

Bluetooth
>Bluetooth 4.0 (for accessory connectivity)

Vía Engadget

How to create mobile UI animations that boost usability and bring app interfaces to life

Animated transitions can make the difference between a great mobile app and one that’s just meh. Transitions — those little animations that make UI elements visible or invisible — often go unnoticed, but when executed right they contribute to a seamless user experience. So what makes a good animated transition and how can prototyping help?

What are mobile UI animations for?

Animated transitions signal a change of state to the user. That can mean signalling a movement in the navigation flow, task completion, introduction or subtraction of on-screen UI elements, and changing position in the interface hierarchy. Designer Davey Heuser helpfully explains animated transitions in terms of movie sound-effects: “It’s not peculiar to use animations and sound effects in movies when someone goes through a time machine, so it’s only natural to use this in your interface as well.” And that’s where animated transitions come in handy.

“It’s not peculiar to use animations and sound effects in movies when someone goes through a time machine, so it’s only natural to use this in your interface as well.”

What makes a good mobile UI animation?

Software developer and UX influencer Nick Babich succinctly defines what separates a good animated transition from a bad one in his post Animation in Mobile UX Design:

Effective animated transitions:

  • Have a clear purpose
  • Reduce cognitive load
  • Establish spatial relationships
  • Prevent change blindness
  • Bring an interface to life

Badly designed animated transitions, on the other hand:

  • Confuse the user
  • Complicate the interface unnecessarily
  • Are random and without purpose

Animated transitions can make mobile UIs more dynamic, engaging and user-friendly. But use them incorrectly and they will have a detrimental impact on both user experience and conversions.

Our list of 5 inspiring mobile UI animated transitions provides top examples of mobile animation, plus we’ve thrown in some expert prototyping tips to help you test out animations in UI prototypes. Enjoy!

1 — iOS camera app focus animation

Predictably, Apple’s iOS Camera app includes a stunning example of well-executed mobile UI animation. As users attempt to focus the camera, a crosshair appears — with a fade-in effect — and shrinks as it finds focus. Once focused, the crosshair blinks in and out of visibility and then fades out.

Check out the video to see the animation in action.

Create something similar in a mobile UI prototype using Justinmind’s animated effects. Effects are triggered when a UI elements is shown or hidden — you can choose the style in which to reveal the element from fade-in or out to bounce, fold and puff.

2 — Template gallery menu animation

Sergey Valiukh from Tubik Studio has come up with an animation that converts a standard contact list into an interactive, engaging experience. Users scroll through their contact cards with a vertical swipe gesture that causes each contact to move forwards, then drop out of sight when dismissed. The animation effectively focuses user attention and uses information hierarchy to good effect.

You can build a similar effect in Justinmind mobile prototypes by using dynamic panels to create transition effects. Link the transition effects to gestures and then test on the prototype on your mobile using the Justinmind app.

3 — Weather Rebound app

This mobile app prototype from Chris Slowik incorporates sophisticated mobile animation that both delights and informs. Not only has Chris incorporated a transparent animated skin that matches the current weather conditions (which we love!), but he’s also built animated his UI elements simply and beautifully. On command, hourly weather icons slide up onto the screen; a lateral slide-bar menu allows users to select the day they need the weather report for. It’s simple but beautifully executed, and allows users to see weather throughout the day at a glance.

Chris has used his own brand assets as the icons for the weather app, but if you’re short on time you can take advantage of the pre-made UI libraries in Justinmind: there are UI elements for all main operating systems and devices, which you can organize into groups and reuse across projects. Or import your own brand assets as SVG files and make them interactive with Hotspots.

Check out some examples of mobile UIs made with our Android Lollipop UI elements.

4 — Elastic progress bar

Mobile users have very., very little patience for slow loading times. According to Kissmetrics, a 1 second delay in page response can result in a 7% reduction in conversions. Mobile animation is a great way to make the wait seem shorter and lower user abandonment rates. UI designer XJW nailed a download loading progress bar and shared it on Dribbble. The animation starts out as a download icon, which transforms into a button moving along an elastic tightrope wire and marking the percentage completion of the download. If the download fails, the progress button fails off the wire. A cute, personality-filled way to convey progress through mobile animation.

5 — Fitness Tracker — Pull Down to Refresh

One of the most common mobile animations is the so-called Pull Down to Refresh, where users refresh screen content by swiping vertically downwards. It’s become an intuitive feature for mobile users, so conveying that the gesture is recognized and being executed is crucial to seamless user experience.

That doesn’t mean that UI designers and prototypers can’t have fun animating the gesture, though. Take Fitness Tracker’s prototype, in which they use the Pull Down to Refresh feature as an opportunity to strengthen the brand while conveying functionality. Instead of introducing any old loading wheel, they add an animation of a character power walking across the top of the interface. It’s simple, good-looking and reinforces the ‘why’ of Fitness Tracker in the user’s mind.

The actual refresh button backs this up with its own great animation. The yellow gradient thumb spot fades in, sweeps down and then explodes out of sight, supporting the dynamism of the UI as a whole.

You can use rich interactions to create this Pull to Refresh button in Justinmind, and add conditions to your event to make it even more advanced. Add animated effects to the event to make the animation richer.

Prototyping mobile UI animations: 5 inspiring examples — the takeaway

Animated mobile transitions can be charming, useful and user-centric. They guide users through a mobile app experience and ensure that both user goals and conversion goals are catered to. But mobile UI designers have to resist the temptation to animate for mobile animation’s sake. Animations should always be relevant, targeted and with a purpose. That way, your UI will be as effective as these inspiring examples of animated mobile transitions.

Vía UX PLanet