Other, Typography, UX/UI

Launched in 2003, Design Observer has been one of the most influential sources for design thinking and criticism on the web. It was founded by four outspoken design critics at a time before the web really cared about design, inspiring an almost cult-like following among many readers. Today it remains a cornerstone of the online design community.

Yet Design Observer has never been a model for web design, and until recently, it had the look and feel of a website a few years out of time. This week, Design Observer is rolling out a new design, which puts an emphasis on being mobile- and social media-friendly in an attempt to increase page views. Will it hold up to the gimlet eye of the design-savvy Internet that Design Observer itself helped to create?

“When we started Design Observer, we had this dream: what if everyone really cared about design and voiced those opinions and argued about them?” Design Observer co-founder and Pentagram partner Michael Bierut tells Co.Design. “To a large degree, that world has now come to pass. Everyone cares about design now.”

The fact that everyone cares about design now makes it harder than ever to ignore the fact that Design Observer looks decidedly dated. The most recent version of the site resembled an old-school blog even when it was released in 2009: a slim column of content sandwiched between two massive, link-heavy side bars. Traffic to Design Observer is up 45% since 2009. But that isn’t tremendous growth for such an influential site: over the past year, the site has only pulled in around 4 million page views. Modernizing the look, feel, and reach of the site was critical.

“The way it looked up until now we felt was overwhelming and confusing,” Bierut says. “In this day and age, having a really dense, multi-channel site doesn’t really seem appropriate anymore.” The trick was to modernize and simplify the Design Observer while maintaining its focus on critical, long-form conversations about design. All while keeping the new design in-house.

The most obvious change is that the new look abandons the old design’s Pee Chee lemon color for a bolder blue design, while focusing the homepage from a river of blog posts into the three big stories of the day.

“We’re not trying to be always on,” says Bierut about the new homepage. “The role we want to play in our readers’ lives is that when our readers get up in the morning, come home from school, or read the site after dinner, there’s worthwhile new content for them. We want to establish real intimacy with our readers, with an expectation and respect for their times.”

In addition to the new front page design, posts on Design Observer are now organized into mosaic-like portals of stories centered around certain topics, an approach to archiving that’s designed to make Design Observer more of a reference tool.

But the biggest practical change about the new Design Observer might just be the way it is doubling down on the community, and concertedly spreading the site’s tendrils into social media for the first time.

“One thing we learned recently was that Facebook and Twitter were not really the ancillary publicizing arms to Design Observer that we thought they were, but people’s primary entry into the site,” says Jessica Helfand, another co-founder. “I guess everyone else already knew that, but when we realized it, it was kind of a big moment.”

To address Design Observer’s new social reach, the site is doing more than adding the ubiquitous social media buttons you expect from a modern site. They are also putting a new emphasis on the Design Observer community, allowing users to register to not only comment on articles, or link their own social media feeds and websites, but link their design influences as well, which Helfand hopes will prove an “interesting benchmark” that will turn Design Observer into a social media network of some of the movers and shakers in the world of contemporary design criticism.

Design Observer knows it will have it share of critics, but for his part, Bierut feels that that is just par for the course in a world where everyone cares about design. “I’m sure we’ll be criticized for continuing to favor a design that is beholden to the legacy of print,” Bierut says. “We live in a world where you can’t even redesign a logo without a pile-on. But I’m grateful to live in a world where at least now people who are thoughtful will figure out why they hate it.”

Helfand doesn’t seem to quite share his serene outlook. “There’s a part of me that really wishes I could just get out of the country for the week, maybe buy a ticket to the moon,” Helfand laughs. “I want to really dig my head in the sand. Democracy and design can be very strange bedfellows.”

Correction: Based upon statements made during our interview with Michael Bierut and Jessica Helfand before the site was officially relaunched, the original version of this article incorrectly stated that the new Design Observer is fully responsive. That is incorrect. In keeping with the site’s idiosyncratic tendency to be a few years out of step with the rest of the design world, the new Design Observer is not responsive. The article has been edited to correct the error.

From FastCoDesign.com

UX/UI, Web Design

I believe that most people are good. Most people really want to live up to their ideals. So why do companies fall short on living up to their missions, credos, mantras, or ideals?

For example, why does a company that says it supports local businesses jump at the chance to work with Walmart just to get a “big name” client on its roster? I have started to believe it is because they haven’t taken the time to clearly articulate company values and, more importantly, establish routines and practices that intentionally frame their decisions to factor in their values.

At our design firm, P’unk Ave, we decided to change that by developing a model for evaluating potential clients, giving us a practical, standardized way to make decisions that stay truer to our values. While it may seem like being picky about who we work with is bad for business, we’ve found the opposite to be true: the more we’ve stuck to our ideals, the stronger our business has become. In this article, I’ll show you how it worked for us—with the hope you can learn from it and do the same for your business.

Establishing your values

You can’t live up to your ideals until you have a clear grasp of them. If you have been in business for some time, you might be surprised to realize that they already exist and are just waiting for you to be more intentional about identifying and writing them down.

Set a timer

My partner and I began our process with some borrowed time on a layover heading back from a conference. We took out our journals, set a timer for 10 minutes, and began writing down our core values. The ideas took form quickly because they had already been part of our DNA. This allowed us to make a rough list of values that resonated with decisions we had made in the past—values like “innovation,” “trust,” and “responsibility.” We’ve since refined these somewhat general ideas using an exploratory process that includes all members of the team, but setting a timer during this early phase forced us not to overthink things, and helped us to get started with ideas that came more from the gut than from the brain.

Take inventory

Then we did a whiteboard audit of our current and past clients to look for trends and to test how our values applied (or not). We paid particular attention to those clients we were most excited about. Through this process we identified a pattern of partnerships with people who work to strengthen our cities (urban planning, local food, bicycle advocacy, waterfront improvement), create knowledge (universities, education initiatives), improve people’s health (advocacy, research), and enhance our quality of life through arts and culture (museums, photography collectives, arts organizations).

Get outside perspective

We followed this up with a workshop led by a friend, which allowed us to further explore our values, strengths, and goals. This led us to create a series of active phrases about our work, including we are part of a community and we dream. These phrases now form the basis of the P’unk Guide, which includes our shared values and principles to run the business we all want to work in. As part of our ongoing reflection, we have also evolved the guide to include “guiding metaphors.” One of those metaphors is based on the notion of sailing upwind: “The shortest distance is not always the quickest.”

Building a framework

Becoming more aware of our values helped us make more intentional choices with prospective projects, but it didn’t necessarily provide us with a framework for quickly evaluating potential projects and relationships. That came when we read the book Drive, by Daniel Pink.

In Drive, Pink talks about the principles of autonomy, mastery, and purpose as powerful motivational elements for modern workers. For Pink, jobs that require deep thinking and applied analytical skills are not easily simplified to an assembly line process, and measuring productivity within a certain time limit isn’t an effective way to track their success. Rather, people who have the freedom to work in the way they see fit (autonomy), who are constantly honing their skills (mastery), and who understand the intention of their work (purpose) perform best in these positions.

There was no turning back. We used Pink’s principles as a starting point to create our own framework for evaluating potential relationships with partners and clients: the AMP scoring system. Evaluating projects through our new lens of autonomy, mastery, and purpose helped us ask whether or not that relationship would motivate us to do good work and help us live up to our ideals of trust, innovation, and impact.

The AMP score

In considering a new project, we take the time to get to know the client, with the goal of determining whether we will we be truly pumped (or “AMPed”) if the project is a success—not because the project is done, but because of the impact it has on something we care about. Then we score it, using a series of questions in each of the three categories. Each category then gets a score from 1 to 5, and we total up the results at the end.


  • Will this client respect us?
  • Will they seek our counsel?
  • Will they give us the space to bring our experience and knowledge to impact the project positively?
  • Do they trust us?
  • Basically, will they let us do what we do best in service to their project?

It is always a good sign when a potential client is genuinely interested in understanding how you work. If they take the time to ask you about how and why you make decisions, they’re telling you that they respect your experience, and are seeking a partnership that is productive and valuable. It is an especially good sign—usually a 4 or 5 on the AMP scale—if they listen carefully and ask thoughtful follow-up questions, since it indicates that they are genuinely interested in working towards a relationship built on understanding and trust.


  • Is there space to practice our skills and grow as craftspeople?
  • Is there time to do the project well?
  • Does the client value a job done well?

For example, if a client emphasizes how simple a project is by saying something like, “All we need is to code this page. It is simple. How long will that take? A week?” or “Do we have to do the research? Couldn’t we just copy the design of this website?” then they may not respect the work we do—especially if this perspective persists after we explain the value of a thoughtful and measured approach. In this scenario, we would rate the mastery score a 1 or 2, since they seem more interested in rushing than in allowing us the time to do thoughtful and considered work.


  • Do we understand the purpose of their project?
  • Equally important, do they understand the purpose of their project?
  • What kind of impact will this project make?
  • Do we feel aligned with that impact?

For example, sometimes a webmaster at a larger organization contacts us, but is only interested in technology. This is common when an organization puts the management of their website solely in the hands of their technical or IT team, instead of seeing it as a communication tool for the entire organization. When this happens, we try to bring leadership into the process and educate them before signing an agreement—but if that cannot be done, the project would score low on the purpose scale. It is particularly difficult to walk away from an organization that is doing work we find interesting and aligns well with our values, but we have learned that when leadership isn’t involved, the project is not likely to be a success.

What does all this actually look like? Practically speaking, we post a message with details about all potential projects in Basecamp, and each member of the team has the opportunity to respond with their thoughts and personal AMP score for the project. Once everyone has weighed in, we compare scores, looking for a total of 12 or higher. We will consider lower scores, but not below 10.

This system creates a paradigm where we are asking ourselves if there is a compelling reason we should work with a client, rather than just looking for a reason not to work with them. That distinction may seem subtle, but it has powerful implications, supporting a proactive versus reactive culture.

Intentional projects are successful projects

This may seem one-sided and only to our benefit, and maybe an unsustainable business practice. However, being thoughtful and intentional in this way has turned out to be a great thing for our clients as well. Once we commit to a project, we are truly committed. We even share how this benefits them in our project proposals:

Most projects will hit bumps in the road that will require persistence and dedication to see it to a successful completion. With that in mind, our philosophy is to only work on projects where there is a strong alignment of values. We truly care and you can see the difference in that approach.

They get that. It resonates with them because anyone that has some business experience knows that unanticipated problems will inevitably rear their head at some point. Because we took the time to evaluate the project using the AMP score, we’ve already decided that we are committed to the success of the project, and any bumps in the road will be tackled with gusto and passion. This knowledge gives our clients greater confidence in working with us.

What’s good for the goose…

As a consultancy, much of our “everyday” revolves around clients and projects. This is the lifeblood of our company and sets the tone for our interactions. If we are not in sync with our clients, our lives can turn miserable pretty quickly.

We always cared about our work and had good relationships with our clients before, but intentionally pursuing projects that align with our business values has brought a higher level of investment and internal motivation from all members of our team. We have become true partners in the success of our clients’ projects.

A lucrative project that doesn’t align well with your values is like the siren’s call to start your day with a sugary doughnut. Of course, getting sidetracked is easy. Using a framework to evaluate potential business has become a way to stay on course—a way to make healthier choices.

When we made compromises in the past, it never resulted in great work and often had other unintended consequences, like burning out our team. The attitudes you develop working on a project you don’t care about can carry over into all of your work. Our framework has helped us stick to our guns and not work on even a single project where we don’t see an alignment of values.

Ideals are good for business, too

The AMP system has had a positive ripple effect throughout our company. Everyone knows that we make decisions based on our shared and agreed upon values. We have chosen not to pursue work that does not garner a high AMP score, and we have even stopped working with clients when they turn out not to allow us to live up to our ideals. In the short term, we may have turned down some potential business, but in the long term we have increased our revenue while working with clients we respect. That growth comes from our participatory culture, where everyone is invested in and focused on their projects—leading to happier clients and a lot more word-of-mouth referrals and opportunities.

This is not something that can happen overnight. If you want to live up to your business ideals, you have to take the time to authentically identify your values, the things you care about. You also have to commit to the ongoing tending and cultivation of those values in your organization. It is not a “set it and forget it” scenario. At P’unk Ave, we think about this regularly, and especially during our quarterly “State of P’unk” and twice-yearly retreats. Building in those rituals, as well as creating tools like the AMP score, helps us stay on track in creating the kind of company we want for ourselves.

But the commitment is worth it. Once you have a framework for evaluating the kinds of people you want to work with, you have power: the power to say “no”—and the power to do the work you know matters.


From: A List Apart: The Full Feed

Last year the digital agency I work for, Bluecadet, started a website redesign project for The Franklin Institute—a renowned Philadelphia science museum undergoing the largest expansion in its history. My colleagues and I were excited because not only were we getting to work with an iconic local institution, but the project represented an opportunity to incorporate a number of techniques into our responsive web design practice: atomic design, HTML wireframes, style tiles, element collages, and front-end style guides. We envisioned a series of quick prototypes that lent momentum to a harmonious back-and-forth between design and development. We felt like this was an opportunity to overhaul the way we created for the web, from start to finish.

And then we got stuck.

We couldn’t figure out where we would fit all of these new techniques into our preferred way of working. I don’t think we’re alone in this. The way we create for the web is changing so rapidly that if you’ve attended enough conferences or read enough books and blogs these last couple of years, you may feel like we did: excited but a little overwhelmed, and worried that your organization is the only one that hasn’t yet adopted the expert-approved way to create for a device-agnostic web.

There’s a seductive danger present whenever you see someone else outline their way of working, however. It’s easy to take their process as a rigid, universal truth. The trouble is, you and your team aren’t like everyone else—you have different strengths and weaknesses. Borrowing someone else’s process wholesale ignores the fact that it probably took them lots of fumbling to get to that point, and it’s going to take plenty of experimentation on your team’s part to figure out what works for you.

So perhaps the solution isn’t to transplant someone else’s guidelines in an attempt to fix the entire thing all in one shot. Maybe there’s a way to take the same iterative spirit of these new techniques and apply it to the overall workflow itself. To prototype your workflow, in other words. In some ways, it’s a mental trick—a way of giving yourselves permission to try things, even if you’re unsure of the outcome. It also lowers the stakes to a comfortable level: if we mess this up, we’re still okay.

What follows, then, isn’t a tidy recipe or a formula. It’s a collection of observations I hope will help you re-cast workflow change as an ongoing process of small, imperfect steps.

Technique is easy, talking is hard

It’s easy to get fixated on the benefits of specific tools and techniques, and to assume that those benefits are self-evident to everyone. But over the course of the past year, it’s dawned on us that meeting the demands of our multi-device web is less a problem of technique, and more one of communication. Sometimes people just need to understand why you want them to change how they work.

Prior to the Franklin Institute project, my colleagues and I had been pooling all of these new techniques, but we instinctively focused on pieces that affected our part of the process. Designers and developers were talking and dreaming—but largely within the echo chamber of their respective disciplines. So when it came time to kick off the project, we had to have some hard conversations about how new techniques would work for us as an entire team, and sometimes we were downright skeptical of each other’s suggestions. On more than one occasion we asked each other: “That’s great, and it works for that agency, but how would that work here?”

You will probably need to make your case differently for each person on your team, then. If you’re a designer, it could mean explaining to your developer teammate that you would like to start breaking things into a design system so that you don’t have to do 20 different iterations of the same page layout. For developers, you might have to convince your boss that a style prototype will be the best way to present a site to your client.

Whatever the rationale, realize that change represents a very real cost (at least in the short term) to your teammates’ time and comfort, and their skepticism may be their reaction to that cost, rather than to the less-immediate benefits you say will follow. Focusing on the why instead of how can help balance those two competing forces.

Limit your focus

As of this writing, Bluecadet has 22 full-time staff members. That’s just big enough to make it hard to work on intricate, shifting process details at a company-wide level. So we’re starting small, at the project level, instead of trying to craft a monolithic process that gets handed down from above.

Look at the projects you have on the horizon. Think about the portions of your workflow that you want to improve, and pick just one of those things to introduce into your project. Why just one? It allows you enough space to experiment without endangering your project.

A mentor of mine once told me that programming (and especially programming for the web) boils down to reducing the number of “unknowns” on a project to a manageable number. One is fine, two is a stretch, and three is asking for trouble. If you think exploring HTML/CSS wireframes could have a positive impact on your work, introduce just that one thing. Most projects have enough built-in friction without adding or changing multiple processes at the same time.

For the Franklin Institute project, we ended up deciding that the added wrinkle would be a front-end style guide. It wasn’t the biggest thing, but it was one small step that we thought could have a big benefit without affecting our schedule.

We made this decision based on two factors—factors that might be helpful as your team thinks about what that “one thing” could be:

  • A good idea that didn’t quite work in the past: we had created a static style guide for a previous project that had quickly become outdated and was ultimately discarded. But we still thought the idea had merit. So when you gather as a team, think about past good ideas that might have stalled, and whether they could work if you approached them differently.
  • (A little) experience mixed with (a lot of) enthusiasm: a new front-end developer joined our team, and he had already been experimenting with different style-guide generators like Barebones and Pattern Lab. More importantly, he was excited about building one. Does someone have something they’ve been testing on a personal project, or that they’ve used successfully at a previous job? If so, you’re already halfway there—you might just need to figure out how to make space for it.

Align your tools and techniques with your team

One of the recurring discussions we have at our studio is: “Should our designers learn markup and start doing some of this design in the browser?” We’ve heard a lot of persuasive arguments for it, but in the end, we decided that the main focus should be how to get our designs into the browser earlier in the process, instead of who should be doing that work.

This led us to try pairing designers and developers early on in a project, and having the developer create markup that “waterskis” behind the designer’s sketches and Photoshop explorations. We’ve found that doing it this way takes advantage of our team’s individual strengths. It also means that our developers are providing feedback that makes it into design iterations while they are still malleable.

We’re currently in the middle of a redesign project for a literary magazine, and we’ve found that the rough HTML/CSS mockups created by our developer helped us pose the right questions to our team’s designer. Giving our designer a specific problem to solve (“These titles take up too much space at narrow widths”) allowed her to judge the problem in the context of the entire design. She could then explain what she was trying to accomplish visually, and even find solutions that extended beyond the immediate issue we were trying to solve. She’d look at the screen while we squished the browser back and forth, and then say something like, “If you move the titles below the photos this whole problem goes away.” Stepping away from dogmatic ideas of who should be doing what allowed her to focus on doing what she did best, which was solving visual problems.

Distinguish between internal and external needs

When you start moving things around, you may start producing deliverables that are important, but only for an internal audience. That might be because they’re of limited use to the client, or they simply may not be mature enough. Managing expectations is as important as trying a new technique, so if the client is going to see something new, you’ll have to invest time preparing them for what they will receive—especially if it’s not how they’re used to working.

For a current project we are producing HTML/CSS wireframes to get an idea of how long they actually take to make. Since we don’t know (yet), the first rounds of client deliverables are still going to be static wireframes done in Photoshop. If we feel like the HTML/CSS prototypes are mature enough, we will introduce them to the client in the final round.

As you work, then, give yourself enough room to adjust: what if it takes twice as long to produce that wireframe? What if the client is resistant to parallel wireframe and design conversations? What if the thing you’ve produced has value, but only if accompanied by other deliverables?

Focus on products, not presentations

One of the things we’ve had to do was clarify the ultimate goal. This seems obvious: “We’re making a website.” But if your process is anything like ours, you actually spend a lot of time making anything but a website. Mostly you make pictures of a website.

Recently, while working on a beta build of a website, we found out that the majority of our client’s team members were using older versions of Internet Explorer and Firefox. Those people were surprised to see something that differed from the comps they’d been presented earlier in the process.

That experience taught us a lot. Setting client expectations is one way to avoid those surprises, but we’re also slowly agreeing as a team: the browser is the final arbiter of what we do, so let’s stop shoving it to the end of the line. The components of our process need to support the final product at every step of the way.

Put your process prototype on the agenda

It’s easy to nod and agree on something: “We’re going to do this!” But when you get immersed in detail work, it’s just as easy to forget that one new thing you all agreed to put in the mix. So task someone with making sure that you revisit your process prototype repeatedly. This might mean you start meeting more frequently. We’ve found it helpful to have official meetings, but our hope is that eventually we start doing this in a less-structured way, choosing to meet informally when we feel the need to discuss something.

If you’re working on a project-based team, remember to share what you’re doing with other groups. For example, on a recent project, we implemented modular content blocks that could be reordered as needed, inspired by a post by Christopher Butler of Newfangled. We then showed what we were doing to a colleague, and she integrated some of what we learned into her next project. She also had some incisive questions for us that helped us improve the content-authoring experience for our client.

By sharing with others, everyone wins: your colleagues will pick up your new skills, and you’ll be forced to clarify your goals and assumptions.

Iterate your workflow (play the long game)

When you’re reworking your process, it’s good to keep a running log of the things (both good and bad) that you encounter with each new change you introduce:

  • Did something take more (or less) time than you expected?
  • Were there people who were negatively affected by the change?
  • How did the client react? If you’ve worked with them before, were they receptive to change?

By breaking things into focused pieces, you’ll be able to evaluate how effective they were. You can keep the stuff that worked, and refine (or throw away) what didn’t. Having a forum to share those pieces is important, too—at Bluecadet, we’ve made sharing lessons from completed projects with one another a regular part of our monthly all-staff meeting.

Over the course of three separate projects, we’ve now field-tested:

  • Atomic/modular content and layout
  • Front-end style guides
  • HTML/CSS wireframes

Here’s the thing: each of those things that we tried? We’ll probably do them just a little bit differently the second time around, because of all the data we gathered from the first go-round. If we had sat around until we were sure about The New Way of Doing Things, well, we’d still be sitting around today.

One of the things I’m most proud of is that by working piece-by-piece, we’ve pushed our workflow forward while being honest with our clients. One of our internal guidelines is that our clients shouldn’t be bankrolling our workflow remodeling project—our fine-tuning should result in tangible internal benefits for us, but, more importantly, a better product for our clients.

Try something new, now

As I finish writing this, we’re trying out yet another thing that we hope to add to that list: HTML/CSS prototypes as a design deliverable. Maybe they will replace static comps, or simply accompany them—we don’t know yet. But it’s okay that we don’t know. By the fall, we’ll probably be building things far differently than we are right now, informed by the experimentation we’re doing piece-by-piece along the way.

I hope that this encourages you and your team to take some small steps, too. Get together and talk about the parts of your workflow that can be improved, pick one thing to try together, and figure out where you can make space for it. Like us, you’ll probably never be able to draw a line on the calendar and say, “That’s when we started doing things the right way.” But you’ll find yourself much further along—one thing at a time.


From A List Apart: The Full Feed

UX/UI, Web Design

Today, at the Super Bowl for Google news, Google I/O, the company rolled out the latest version of its mobile OS, Android L, which is almost entirely predicated around the final step in its amazing design evolution: a formalized, unified design language across all their products, platforms, and devices called “Material Design.”

Last year, we realized that Google had unofficially embraced the humble index card across their apps. This year, under their Material Design thesis, they’ve taken this idea to extremes. Cards are no longer just generic windows that fit inside any interface. Cards are the interface, sewn together like an elastic, patchwork quilt. They appear on screen with depth (thanks to liberal, but tasteful, use of drop shadow), and enable constant, seamless transitions to anything you want to do. Tap an email, a card grows. Tap it again, a card shrinks. And on top of all this virtual paper, Google has constructed precanned animations that sprinkle another layer of color and physics wherever you touch.

Matias Duarte on Stage at Google I/O 2014

As Android lead designer Matias Duarte demoed it on stage, he explained that it moved with the physics of card stock, but also splash with your touch, like “ink rippling in a pond.” He clearly put it better than I can, though I’d add that Android‘s core UI has long been cleanly designed, but was always a bit cold. Material Design adds a bit of human warmth back to the equation.

What’s potentially most interesting about Material Design is that Google is opening up all of these tools and animations in their new Android L software development kit. That means, not only is Google using these cards for their apps like Gmail, any developer can adopt this interface technology into their apps. Elements like Android’s buttons will now have rippling ink effects built right in.

Material Design in L Preview

And furthermore, Duarte teased that Google’s software was smart enough to intelligently rearrange text and photo interfaces you may have already built, padding out white space, clarifying text, and even creating a UI color palette based around a company’s logo or photos an app contains–and then rearrange all of this UI appropriately for a phone, tablet, Chrome browser, or smartwatch. (Though, it’s worth noting, when Google actually showed off an Android Wear smartwatch on stage, a lot of the more beautiful card animations were missing, probably in favor of devices that have less graphics processing power than your phone or laptop.)

The software is just being made available to developers today as a release preview, and will be available to the masses in the fall. So just how smart Google’s design algorithms are, and how flexible Google’s Material Design thesis proves to be across apps beyond Google’s, is still unclear.

Gmail App, before & After

But one thing is certain: Google’s thesis on design is finally coming together. And even though Jon Wiley–lead designer for Google Search–told me that Google wouldn’t be presenting a design thesisfor all developers to follow at I/O, that appears to be exactly what they’ve done.

To Google, Material Design is the new way to design.


Original Article from fastcodesign.com

UX/UI, Web Design
Video games have come on miles since the days of perching at the end of the sofa in our living room avidly clutching a Playstation control and racing Crash Bandicoot repeatedly down the same strip of the Great Wall of China. They’ve come on so far in fact that the kids of today don’t even need controls, apps, or to download any software. They don’t even need to be kids, for Pete’s sake!

The revolution I’m referring to is Racer, the game which has just won gold at Cannes Lions, which allows you to race cars across multiple screens – be they androids, iPhones or tablets, without any faff whatsoever. It’s pretty innovative, relying solely on the internet and the use of the Chrome browser to provide smooth playing. With music by Giorgio Moroder and beautifully slick visuals, it looks to be the new Crash Bandicoot. Watch the behind-the-scenes video below for all of the real techy lowdown.

  • 1

    Racer (still)

  • Racer-2

    Racer (still)

  • Racer-1

    Racer (still)


Successful social interaction relies on trust and connection-making, yet a key challenge in digital environments is the disconnected and faceless experience they can provide. This is where design can play a powerful role.


Communities are defined by the people in them, so allowing individuals to create identities online helps them express themselves, feel included, connect with others who are similar, and know where they have unique expertise. According to Tony Bingham and Marcia Conner, authors of The New Social Learning, “A core capability of any online community is its member profiles. Viewing a person’s profile should essentially provide the same feel as visiting his or her office—complete with pictures of the kids on the desk and certifications and awards on the walls.“

Perceiving people’s identities is also a key facet of trust. In order to be free to learn we have to trust others, both in terms of their competence as well as socially (that they won’t point and laugh when we ask questions.)

If user profile pages can be linked to other systems that already store user information (name, email, projects) then you can automatically populate those fields to save your learner time and avoid empty profile syndrome. Elements of identity can also exist beyond a profile or description page. One approach is allowing learners to highlight their best work in a portfolio or by pinning it to the top of their wall.

Another good reason to require some form of digital identity is to encourage participation. According to research, learners feel more obligated to participate when they can see each other.

Support Social Awareness with Visualization

There is much that goes unseen and unsaid in a virtual environment. Without the benefit of nods, smiles, movement, and gestures, we have to do a lot of precarious guess work about what people are thinking and feeling. This is where interface design decisions can help. You can bring out social concepts that might otherwise be missed online, by representing them graphically. For example, emoticons signal simple emotions, badges can be used to show levels of expertise, and co-presence (who’s online) can be communicated with icons or lists.

You could also visualize group activity (such as varying levels of participation or popular conversation topics) using a word cloud. Size in the cloud could be based on various things, like quantity, quality, or popularity of postings (ratings, shares, responses).

However, be careful what message your cues are sending. Visualizing quantity suggests that quantity is valued and could lead to a slew of poor quality posts in a forum. Likewise, popularity cues could lead to groupthink. Ideally, you can work iteratively, adjusting the design to meet the unique dynamics of each community.

Show the Network and its Connections

Group identity and social presence can both be supported by graphical representations of a community and its connections. Of course this is easier said than done and difficulty in doing this increases with the size of the group. For example, you might create an online marauder’s map (like the magic one in Harry Potter) that showed location for a small group of users, or more realistically, a geomapping widget could show each community member as a pin on the worldmap.

Of course once your community hits the hundreds or thousands, things get trickier. But it’s been done. The 10,000+ students in an open course offered by the MIT Media lab located themselves on a shared Google map which made it significantly easier for people to connect regionally while supporting a coherent sense of a diverse community (Figure 6.3).

A group at IBM research took data of 73 million relationships between 450,000 people to create a visual analytic tool they created, which supports expertise location, team building, team coordination, and workplace relationships. Naturally this is as much (or more) a programming job as it is a design job, but don’t underestimate the design challenge in making the graphics for avisualization of 73 million relationships useful.

MIT MOOC world map

Figure 6.3 Students in an MIT-based MOOC located themselves on the world map. Only a small segment of the participants are pictured as the total overflowed onto ten map pages.

As another example, TouchGraph is a Facebook app that creates a map of your network and organizes it by categories. Graphics like these can include thumbnail pics or collective symbols of members in selected categories (country, discipline, interest, etc.). They might initially present a summary but allow zooming in or hotspots that reveal deeper information.

Letting users view others (and themselves in relation to others) in one map can reveal commonalities and diversity and support serendipitous interaction. It can also simply help give learners that sense of being all together in one place at one time for the same reason—something that is easy to miss in online learning but is so important to community.


TouchGraph creates a map of your network and organizes it by categories.

Leverage Social Influence

People are easily influenced by other people’s opinions and behaviors, especially when they are uncertain themselves. Knowing this, you can design for testimonials, ratings, and reviews to influence behavior. So if you want to encourage people to participate or contribute, but they’re wavering, presenting evidence that others are doing it and getting value from it can help.


New users are eager to share information if their friends are already in the network and collaboratingtweet this


For example, new users in a virtual community are more eager to share information if they find out their friends are already in the network and collaborating. Ratings and reviews are more influential when learners know more about the person behind them, so rich profiles linked to social validation features can make them more effective. But the desire for social validation can also go wrong when it funnels learners into a state of groupthink.

Design to Prevent Groupthink

Just as we can make better decisions together, we can also make poorer decisions together. Groupthink occurs when members of a group don’t express new ideas, opposing arguments, or opinions, because of the social pressures within a group.

Symptoms of groupthink include rationalization, peer pressure, complacency, moral high ground, stereotyping, censorship, and the illusion of unanimity.

The problem with groupthink is essentially a lack of alternatives or views being presented, which can hinder learning in classroom scenarios or have devastating consequences to high stakes decision-making. To help prevent groupthink, interface designers can include elements that encourage the antidotes:

  • Give people a way to write down and share ideas ahead of time before a synchronous meeting.
  • Include tools for brainstorming that reward quantity over quality of ideas.
  • Include tools for friendly debate.
  • Consider visualizing group participation to reveal overly dominant personalities or members on the periphery.
  • Allow learners to rate how confident they are in their decision before they show that decision to others.
  • Let users vote or comment anonymously.
  • In more structured educational environments you might include facilities for listing pros and cons, other ideas, or for users to take on distinct roles (such as devil’s advocate).

There’s more excellent information, including a list of tools and techniques for avoiding group-think on mindtools.com.

Use Interface Cues to Encourage Contribution

One of the major issues around reaping the benefits of social collaboration and learning has to do with motivation—how do you get people to contribute? What are the conditions for fostering community online?

A study by Hyang-Sook Kim and S. Shyam Sundar, “Using Interface Cues in Online Health Community Boards to Change Impressions and Encourage User Contribution,” which testedinterface cues in discussion forums shows that displaying cues for number of posts, views, replies, and ratings of usefulness (and by inference similar cues like shares, likes and reposts) encourages participation of two types: evaluation of content and contribution of content. They also found that popularity cues (likes, ratings) were more influential than authority cues (expert badges). They offer the following advice to interface designers:

  • Consider including at least two cues—number of posts by a user (which communicates authority in the community) and ratings of helpfulness (which encourages a “bandwagon effect” or “everyone else thinks its good so it must be”). Both positively affect member attitudes toward the site and its content.
  • Cues conveying the number of times posts are shared are powerful in reinforcing community bonds, thereby enhancing users’ contributions to message boards and energizing them to contribute more (Figure 6.7).

Displaying cues

Figure 6.7 Displaying cues for number of posts, views, replies, and ratings of usefulness can encourage participation. This online message board has interface cues conveying authority (or expertise) and the level of community interest in the message thread.

Design to Prevent Trolling

Anonymity increases trolling and conflict behavior since users feel free from social repercussions. Therefore, including some form of identity, even if representative like an avataar will reduce these unwanted behaviors—more reason to design for rich learner profiles within learning communities. Likewise, the presence of a moderator in a group reduces the instance of negative interactions.

Design for Match-Making

The value of a network lies in its connections. In fact, research has shown that people who have more connections, do better at work, are better at learning, and make better decisions. For this reason, most social media present users with automatic suggestions of people with whom they might connect or subgroups they might want to join. Match-making occurs around artifacts as well as people at places like GoodReads (whose slogan is “Meet your next favorite book”) or at Amazon.com, where viewing one product leads you to “similar items” in three different ways: automatic suggestions, user-created lists, and via social influence “people who bought this also bought…”

At the multinational consulting firm Deloitte, organizational data is combined with user contributed information about projects, job roles, and interests in order to link people together who are otherwise separated all over the world. Bingham and Conner tell the story in The New Social Learning: “New hires can easily find five people who went to the same college they did, three who worked for the same company, and two who grew up in their small town. Whenever someone with a similar history joins the organization, he or she can get an alert with the ability to make these kinds of connections.”

Way to warm up a crowd.


From UX Magazine


But this method is inefficient. In response, Apple debuted a new feature that will appear in their newiPhone/iPad software, iOS 8. They’re called Extensions. And what they do is allow you to use apps within apps, without having to multitask your way back and forth.

This might sound like a small detail–another feature that won’t really change anything. I disagree. I believe that because Apple is so influential in the app space–developers tend to make apps for iOS first and Android second–Extensions will shape the way we use our phones and developers create our apps into the future. Namely, most of us will begin using just a few apps on our phones. Alpha Apps, if you will. And these apps will be designed to contain other apps.

Meanwhile, the Internet of Apps–an idea where we surf from app to app as lazily as browsing the web–will never come to be.

How It Works

An extension can allow you to pin a recipe to your Pinterest page from an unrelated cooking app. An extension can allow Bing to translate a Russian menu from inside Safari. Or an extension can even enable you to use a third-party photo editing tool within Apple’s Camera app. Extensions are kind of like ordering delivery rather than going to a restaurant. You don’t have to move. What you’re looking for comes to you.

Extensions appear in a menu, using their respective app icons.

This is different than how a lot of Apple’s Silicon Valley peers have approached the problem of hopping around apps. Before yesterday, when Apple introduced extensions at WWDC, all of the approaches were basically doing the same thing. They were linking our apps to one another, just like hyperlinks connect pages of the web. You’d constantly leave an app to go to another app.

Google has recently introduced a clever trick to promote this linking, and Facebook released an open standard called App Links to do the same thing. (In fact, even Apple has already had such an app-to-app linking standard built into iOS.)

Google handles app-to-app linking: “Get an uber” shoots you right to the uber app.

Taking the app linking model to its logical conclusion, a world ruled by app links would more or less recreate the web itself. We’d hop from app to app to app, mindlessly surfing all along the way. And indeed, when I talked to Simon Khalaf , CEO of Flurry last month–the world’s largest app analytics firm, whose software is probably installed on between 7 and 10 apps on the phone you’re using today–he believed that this app-to-app hopping was very much the direction that apps were going. He went so far as to call this world “the Internet of Apps.”

A Case of Misdirection

Now, there are practical reasons the Internet of Apps is a flawed idea! Namely, how can we be linked to content inside an app that we don’t even have downloaded yet? (What happens in this case is that the user gets stuck in an App Store, prompted to download software when they’re just looking to read a news story or something.)

But realize, Google and Facebook have both been charging forward with the Internet of Apps in mind, building the infrastructure and design cues to make it more feasible, enabling users to hop around apps easily. Smelling money in the air, Google has even started indexing app-to-app links for their search technologies, so they could crawl and categorize these app links just like they crawl web links. Given more time, it’s quite possible that Google, Facebook, and Apple, working toward a common cause, could have made app linking work as well as hyperlinking works on the web. Maybe they could have developed a way to use apps without formally downloading them, for instance, preloading them in the background of your operating system in a way that didn’t clutter your phone, waste your time, or put you at a security risk.

But now that Apple’s Extensions exist, they’ll divert the industry from solving the fundamental UX problems that would be needed to create a true Internet of Apps. Apple has more or less decreed that the way users will juggle multiple apps won’t be app linking. Instead, their tacit thesis seems to be that a few core apps–Alpha Apps–will be the gatekeepers to do everything on your phone, while every other app plays a small supporting role. In other words, every silly photo filtering app may be swallowed alive by an Instagram, which could become the center of all photo apps.

Here, third-party photo editing software runs within Apple’s photo app.

In the Extensions scenario, the tiny utility apps we’ve known for so long may become mere accessories to the power players, never actually opened by anyone, but used by some of the most popular apps in the world with frequency. They’ll become what the tech world has called “plug-ins,” or even, yes, “extensions”–the Photoshop filters and the Chrome ad blockers of the app world. One could imagine that these apps wouldn’t even have a purpose on your homescreen–they could live only within the extensions sub menu itself.

Because Apple has so much power in the world of apps–due to the fact that their iOS platform is generally more profitable for developers than Android, so developers tend to build for iOS first and Android second–it seems most likely that developers will start designing their apps around Extensions rather than app links. How the economics will work out for developers whose apps are used through other apps is still a bit unclear. But as a result, Google’s Android platform will likely follow Apple’s iOS Extensions lead, building out a similar app-wrapping-around-an-app interface.

And that whole Internet of Apps thing? It will never gain enough momentum to happen. Instead, we’ll enter the era of Alpha Apps, and they’ll roll themselves around everything else.


From Co.Design

UX/UI, Web Design

A design pattern that is currently growing more popular is the fixed position bar at the top of the page. Sometimes the bar stays the same throughout, sometimes the header morphs into a slimmer bar as you scroll down, sometimes a completely new bar appears.

For example, as you scroll down on the New York Times website, the top navigation bar shifts from displaying typical site-wide navigation to article specific controls, showing the title of the article, the share link, the comments link, as well as compressed site-wide links:

At the Forbes website, as the user scrolls down the page a fixed position bar appears at the top promoting links to other articles the reader may find interesting, as well as a drop-down site navigation menu, search and user controls:

While these bars may be useful, they take up vertical space, reducing the reading space the user has chosen for themselves by picking the size of their browser window. Additionally, information displayed on these bars does not do anything to aid the reading of the actual content, making the bar more of a nuisance than help.

An interesting way to solve the issue is to hide the bar when scrolling down, and show it when scrolling up. On mobile interfaces, where space is precious, this technique is used to hide chrome, such as Web browser controls, but it’s also a good pattern to use on the Web. For example,Medium has just updated their new navigation bar. As you scroll down, the bar goes away, but it can be revealed at any time by scrolling up. Here’s what it looks like:

Less annoying than bars that just sit there as you scroll down, and makes the menu easy to access without having to scroll up to the top of the page. Scrolling up won’t necessarily mean the user wants the navigation — they may just be scanning the content — but 100% of the people wanting the navigation will be scrolling up, making it a pretty good compromise.

View Original

UX/UI, Web Design

What Comes Next Is the Future is the definitive documentary about the web, as told by the people who build it each day.

Their challenges and successes will help us better understand this thing called the web, and what lies ahead. A project by Matt Griffin — founder of Bearded, a Net Awards 2014 Agency of the Year nominee – What Comes Next is the Future is an effort to capture the titanic shift in the web landscape that mobile devices have initiated.

Like it or not, we are firmly in a world where the web is in everyone’s pocket. According to Pew Internet Research’s June 2013 reports, 81% of Americans between the ages of 25–35 own a smartphone, 33% of American adults own a tablet computer, and 42% of smartphone owners between the ages of 18–29 consider their phone their primary way of accessing the internet.

Thanks to this mobile revolution, the ways people interact with the web and one another are changing. This shift has forced us to drastically alter our perspectives about the work we do, and how we go about it. What Comes Next Is the Future aims to capture this transformation.

But like many things, the web isn’t just technology – it’s people. We’re often overrun with descriptions of the shallowness of social media, and the implications that has for our basic humanity in this modern hyper-connected world. There is a nostalgia for life before we built the most comprehensive, democratic repository of human knowledge that has ever existed. But to ignore the web’s importance, to treat it as simply a product or appliance that has come into our lives, is to miss the point.

In What Comes Next Is the Future, you’ll meet people who – through our contact with the web – came of age and found each other. For many of us, the web gave us a place where we could contribute, apply our talents, and make things that matter.

What Comes Next Is the Future is a story about the internet, and how the shifting mobile landscape has drastically changed our industry. But it’s also the story of how we’ve all changed as a culture and what we can look forward to in the future, as seen from the perspective those who’ve helped build and shape the web over the last 25 years.

 We Need Your Help

To make the best version of this film we can, we need your help. The more funding we raise for this film, the greater our scope will be.

Our Kickstarter goal is just the minimum we need to finish a shorter, tighter-budget version of the film. This budget will help us pay professional video editors, upgrade our equipment, and cover travel expenses for new interviews as well as some of our time spent on the project so we can really give it the attention it deserves.

We’ve already interviewed:

Once we surpass our goal, we’ll be able to add even more interviews, travel further to get them, and employ more film professionals to make a higher-quality product for you. We’ve already got the thumbs up from a number of people we’d like to interview next (with doubtless even more to come). Here’s a short list of some of our additional heroes who have agreed to be interviewed so far:

Need we go on? It’s crazy all the knowledge and experiences in these people’s brains. And we can’t wait to start getting them on camera.

We want What Comes Is the Future to be the definitive film about the web. Help us make it happen.

The music in the trailer is Slow to Thirty by Low Lumens.

Corporate Sponsorships

There are plenty of ways for organizations to contribute to the film. There are four tiers that get your company name or logo in the closing credits of the film:

  • $5,000 = a full-column logo in the credits (limited to 8)
  • $2,500 = a half-column logo in the credits (limited to 12)
  • $1,000 = a quarter-column logo in the credits (limited to 16)
  • $250 = your name in the credits (limited to 48)

We even created a handy graphic to show you how it works!

Our Corporate Sponsor Levels

To make a donation on behalf of a company, you just use a corporate credit card on someone’s Amazon account. At the end of the project, I’ll contact you for exact wording in the credits or logo files, as necessary.

Risks and challenges Learn about accountability on Kickstarter

At Bearded, we’re not professional movie-makers. We make web things. So what are we doing trying to make a film documentary?

The shift that’s been happening with the explosion of mobile devices on the web has felt monumental. Tectonic, even. And no one, as far as I know, has been capturing these changes in technology and culture (at least not from the perspective we’ve been watching it).

Last year I realized that I had booked a number of speaking engagements with people in the web design industry that I greatly admire (people like Luke Wroblewski, Ethan Marcotte, and Josh Clark, to name a few). So I decided to write up a list of interview questions, and lug along a Canon DSLR video camera to see what I could capture. Everyone I asked to help has been unbelievably open and enthusiastic, and the footage we began to amass was awesome. Pretty soon it became clear that we were – qualified or not – making a movie.

I’ve spent the last five and half years building and running a business where we make things every day that we didn’t know how to make when we started. We’re problem solvers. That’s what we do. No doubt countless problems will arise with this project that we’re not expecting. But that’s normal; there will be problems, and we’ll come up with solutions as they arise.

I’m also experienced enough to know that everything there is to do requires expertise. Filmmaking expertise is not something we have. So we’ll be using a good chunk of our budget to hire professionals to do things like editing, finishing, and perhaps even on-location filming. The more funds we raise, the more we can engage film industry pros to do the things they’re good at, and we can focus on guiding the content and direction of the film.

Besides professional help, what will be spending money on? Travel expenses to go do the interviews, better film equipment, and covering the cost of some of our time, so we can afford to really focus on the film.

View Original

Graphic Design, UX/UI

Steve Krug famously said, “Don’t make me think.” This statement is simple, profound, and especially true in the case of mobile interfaces. With smaller screen real estate, increased app fatigue, and decreased user adoption rates, there has never been a better time to revisit these words.

The key to keeping apps ticking, alive, and successful is captured right in that statement. Create an intuitive user experience; don’t make the user think.

User experience is the art of weaving together context, design, ease of use, uniformity, context, relevance, and consistency. On mobile, this experience is what sets apart the successful apps from the rest. Every interaction that the user has with the app turns into an opportunity to be seized to turn it into a deeper, longer relationship. This can be accomplished in two ways:

  1. Through colors, design, and typography—the purely visual end of the user experience spectrum. Designers can use these elements to create visual continuity, pleasing interfaces, readability, and functionality.
  2. Another equally important and oft-overlooked aspect is controlling the front end of mobile apps (the mobile UI, screen layouts, and elements) from a back-end (such as the server or Content Management System or Web application). This philosophy makes it so that screens can be built at runtime allowing them to be either data or user driven.

Reams of digital paper have been written on achieving user experience through purely visual elements. Let us delve a little deeper into the latter approach.

The Over-Arching Process

  1. The back-end, be it the server or CMS first identifies the context.
  2. Depending on context, this back-end generates screen element information and selects thecontent to be displayed in the app.
  3. This information about the screen elements and content is sent to the front end, which is the mobile app.
  4. The mobile app renders the screen accordingly.

What Impact Will this Have on Users?

A superior and more convenient user experience. Period.

By getting rid of screen widgets that are not needed for a particular kind of user or a kind of data, we can offer users an uncluttered app interface. We can re-use the same screens for different use cases. We can make the application scale automatically and enhance functionality without having to deploy new code.


Getting rid of screen widgets that are not needed … can offer users an uncluttered app interfacetweet this


Check out a few real world contextual usage scenarios:

Context 1: Users

Identify user groups based on login and display screens accordingly. Let’s take the example of an enterprise iPhone app being used by employees of a company to fill in timesheets.

  • Upon login, an employee views just his or her timesheet and has the option to fill in the fields with hours spent and project worked on before submitting it.
  • If the user is a senior manager, however, upon login, his or her screen would show his or her own timesheet and additional links or buttons to see the timesheets of team members and approve them.
  • The back-end identifies not just that this user is a manager but also the employees that are in his or her team, allowing access to only their timesheets.
  • For managers, the screen could also throw up a dashboard for analysis such as a chart of employees vs. time spent on work.

Back-End Mobile DesignBack-End Mobile Design

Context 2: Data

Identify the data structure and display content accordingly. Let’s take the example of a mobile app that requires users to fill a form with different fields.

  • The back-end application can be built in such a way that it allows for fields to be added with names and their types. For example, Name would show up with a text field, whereas a “need pick-up” option would show up with a toggle switch with “yes” or “no” options.
  • If we take another case where the data type is a list, this is identified and sent to the mobile app along with the list contents. The app will then display a widget that can hold a list.
  • The fields can also be reordered exactly the way the mobile app has to display them.
  • When the business requirement changes to show new fields in this form or to hide this form altogether from the mobile app, it can easily be accomplished using the database or a content management application.

Back-End Mobile Design

Context 3: Input Fields

Identify the input field and display appropriate attribute field. For example, an admin user uses a CMS to create a form for patients to fill up in their mobile app.

  • This user can create a field “Registration Number,” which is a text field, and specify its attribute as “numeric input.”
  • Accordingly, in the mobile app, that form displays a text field that shows up with a numeric keypad when user tries to enter information.

Back-End Mobile Design

Context 4: Geo Location

For this example, a mall has an app that visitors have downloaded.

  • As they move around, visitors will see trending offers and coupons on their screens related to the stalls they are closest to.
  • Also, depending on where they are, they see screens getting refreshed with relevant content. So, if they were close to an apparel store, the UI would be a product catalog whereas if they were near a restaurant, they would see a menu listing.

Back-End Mobile DesignBack-End Mobile Design

Context 5: Operating System

For cross-platform apps, this could be a real boon.

  • The app could show iOS style buttons if the device is detected as an iPhone or hide the “back” buttons if it is an Android phone that has the device “back” option built in.
  • The true advantage lies in retaining the native feel even with cross-platform or web-based apps.
Context 6: Screen Resolution

Let us take the example of an app that has images coming into the app via web services.

  • The exact number of images would be known only at runtime, so a single image will have to be shown and centralized on the screen, but multiple images would require an image gallery.
  • Similarly, large devices can show a grid of thumbnail images and allow users to pick one to see full screen view. For small devices, the grid would not work because each thumbnail is too small for the user to make out anything.
  • So, the best UI would be to use a carousel or a horizontally scrolling set of images for the user to browse through the entire set. Another option would be to have the same grid style, but bigger-sized boxes in it.

Back-End Mobile DesignBack-End Mobile Design

Dissecting the Pros and Cons

The advantages that this approach offers designers and users vary from more innate user interactions to reduced code deployments. Specifically:

  • Reduced number of screens in the application
  • Reduced number of clicks to get to a feature/functionality
  • Gets rid of unwanted screen elements making for a cleaner UI
  • Enhances user experience by keeping content contextual to user/data
  • Retains flexibility to introduce new screens or new screen elements by giving a few user controls in the back-end system, which also allows for scalability
  • Reduced need to deploy new code on the web/mobile application each time you want the screen to look different—especially true with mobile apps, where every code change will need a new version of the app to be uploaded on to the app store
  • Give clients the power of self-styling their screens
  • Render widgets according to the OS, browser and screen resolution of the device

That said, there are a few data points to abide by:

  • Stay away from introducing unnecessary complexity
  • Try not to integrate unnecessary logic into the screen-building, keeping in mind that since this happens at runtime, you don’t want screens to take ages to load (Take the case of inheritance of widgets: if widget A is present show widget B with X content else if widget A is absent, show widget C with Y content—avoid this kind of logic if not really necessary)
  • Use intelligent data structuring—building web response templates in a way that the mobile app can easily use means processing time on the mobile device can be kept at a minimum
  • Use this approach only in cases where it makes sense to do so—there’s no need to follow this approach of building screens dynamically at runtime if: functionality can be easily achieved by controlling it at the front end; functionality can be easily achieved by hard-coding the screen layout; there are not too many varying contexts in the scope of the application


When the goal is an app that delights and engages, user experience is the key—this is a universally acknowledged truth. But, with mobile apps, decoding user scenarios and coding your app accordingly will surely get you on the path to a longer user commitment.

Illustration of smartphone coutesy Shutterstock.


From UX Magazine