background preloader

Designing Screens Using Cores and Paths

Designing Screens Using Cores and Paths
Imagine you’re on one side of a grass lawn and you want to reach the bus stop on the opposite side. Do you walk on the sidewalk around the edges or cross in the middle? Assuming the grass is dry and it’s not prohibited, you’d probably take the shortest path and walk across the lawn to the bus stop. Such unplanned paths connect the shortest distance between two points, and we can find them everywhere in our surroundings. Architect Christopher Alexander recognizes desire lines in his renowned book, A Pattern Language (1976)[2]. To lay out paths, first place goals at natural points of interest. In principle, Alexander’s approach is to begin with the goals—the things people ultimately want—and then link them together in the most useful way. Typically in web design, the opposite approach is the rule: designers begin with the homepage. Inspired by “desire lines”, we can reverse this tendency in Web design. The Cores and Paths Model “Start with the goal.” 1. 2. How do users get to the core? 3. Related:  UI & UX

Brand as Context in Interaction Design I’m sure I was swearing allegiance to one brand over another as soon as I began to develop the capacity for critical thought. Reebok vs. Nike, Coke vs. Because people assign meaning to brands, brands stand for something; they have both value and a set of values. While there are tremendous differences in how people react to these brand names—based on countless cultural and social parameters—whether consumers view them in a positive or negative light, they likely find it hard to remain neutral. Even though brand and product design teams typically approach their work as distinct teams with different measurements for success, it is essential to work across organizational silos and ensure each team is aware of how to complement the other. When interaction designers focus solely on matters such as flow and consistency, they miss opportunities to imbue products and services with a sense of connection, ownership, and emotion. Corporation Out People In Be mindful of the story

Usable yet Useless: Why Every Business Needs Product Discovery Brasília is a remarkable, bizarre city. The vision of architect Oscar Niemeyer, it was built in just four years, from 1956 to 1960. More than 50 years later, its beauty and elegance are renowned. But Brazil’s capital city is known for something else as well: how difficult it is to live there. A “shiny citadel” from far away, as The Guardian once wrote, up close Brasília has “degraded into a violent, crime-ridden sprawl of cacophonous traffic jams. This problem echoes across today’s web landscape as well, where the needs of ordinary users spill constantly into designers’ utopian vision. Why can’t some interactive products find enough users to be sustainable? Most importantly, what can we do about it? The rise of usable, useless products#section1 We’ve long accepted that for a product to be useful, it needs to have acceptable levels of both utility (“whether it provides the features you need”) and usability (“how easy & pleasant these features are to use”). Why products fail to fit#section2

Your Facebook Account has Three Passwords » Experience Design Models: Minding the Gap Between Ideas and Interfaces Johnny Holland I have never, ever, had an original song or melody pop into my head. I frankly think it would take me a lifetime to become a one-hit maker; let alone a one-hit wonder. I have however, had numerous occasions when I’ve heard a song and then imagined a movie scene play out. For me, the inspiration needs to first come in the way of a soundtrack. I can then fill in the blanks with a storyline. In becoming mindful of my own personal nature, I’ve recently started paying more attention to how others around me think as well; and more specifically, how they approach design problems. In thinking about the differences between these types of personal attributes, I’ve also started noticing that we designers sometimes leap from nascent ideas to interfaces far too quickly when faced with a design problem. So what can we do to better communicate experience design vision during that window of opportunity between raw ideas and design deliverables? What? What exactly is an experience model? Why? When?

10 UI Ideas to Learn from Gumroad) 10 UI Ideas to Learn from Gumroad Gumroad is an exciting new startup that lets anyone sell digital content with just a link. It was founded by the prolific Sahil Lavingia. Sahil has designed a number of useful apps, ranging from Pinterest in the early days, to Turntable, to Crate, to Caltrainer, etc. This is how the Gumroad home page looks, un-dissected. And here is the dissected version, with the 10 things we’ll learn - Let’s get started - 1. This top bar has become increasingly common. When we visit sites, a split second is used to subconsciously say “Oh, these are the colors we’re using here. Note that Sahil has picked energetic colors. 2. A lot of logos have very little to do with the name or product of a company. But others have plenty to do with the name of the company/product. Until you have a brand and you own blue birds the way that Twitter does, ensuring your logo and the favicon are as good as possible at reminding a user of your company name is key. 3. 4. 5. 6. 7. 8. 9. 10.

Post-Artifact Books and Publishing — by Craig Mod — Craig Mod, June 2011 "Roger Bacon held that three classes of substance were capable of magic: the herbal, the mineral, and the verbal. With their leaves of fiber, their inks of copperas and soot, and their words, books are an amalgam of the three." — Matthew Battles, Library: An Unquiet History1 What is a book, anymore, anyway? We will always debate: the quality of the paper, the pixel density of the display; the cloth used on covers, the interface for highlighting; location by page, location by paragraph. Stop there.3 Hunting surface analogs between the printed and the digital book is a dangerous honeypot. In reality, the book worth considering consists only of relationships. The future book — the digital book — is no longer an immutable brick. The book of the past reveals its individual experience uniquely. For those of us looking to shape the future of books and publishing, where do we begin? The way books are written has changed. We have an opportunity now to shape these systems. 1.

Why most UX is shite I was invited to speak at the event this week where getting a little sweary and ranty is kind of encouraged (it goes well with the craft beer consumption that is an integral part of the conference mix). This was my contribution. Slides: When I checked the agenda to see what I was supposed to be talking about at Monkigras, I saw that I was down to talk for 15 mins about ‘Crafting Good UX’. Where to start. An elegant UIBeing AddictiveA Fast Startbeing Seamless, andIt Changes You I hate these kinds of lists. If only that were true, we’d be overwhelmed by UX amazingness. It’s not that simple right. Now, there are plenty of ways you can make a user’s experience of your product rubbish, but in my experience, there are a handful of serial offenders. 1. So, this one I see ALL the time. From a start up who doesn’t want to rule anything out of its value proposition so doesn’t really know what it is so, as a consequence, no one knows what problems it’s solving so they don’t engage. 2. 3. 4.

5 Essential Product Design Books That Aren’t About Product Design "What are some good books about product management?" is a frequent question for designers and engineers, especially those who are first-time founders. While there are any number of volumes you can peruse about agile development, team building, roadmaps or whatever skill you want to acquire, the art of product design is more elusive. Here are five of my essential product design books that have nothing to do with product design: 1. If you don't own this book don't even read further. Breathless praise aside, Cialdini identifies key principles of persuasion such as social proof, reciprocity, subservience to authority figures, desire to act in a consistent manner and perceived scarcity. Free bonus content! 2. If you want to quickly remove the romanticism from your relationships, just tell your partner that the only reason you're monogamous is that humans have long gestation cycles and babies have high mortality rates if left unattended. That shit cray, right? 3. 4. 5.

Why Users Fill Out Forms Faster with Top Aligned Labels by anthony on 09/01/10 at 3:48 pm Imagine a user who is really excited about your product or service. They’re ready to sign up, so they go to your form page and start filling out their information. The way you align your labels with your form fields can affect how easy it is for users to fill out the form. Top aligned labels are faster and easier to fill out than left or right aligned labels. The only drawback with top aligned labels is that they can make the form long. The difference is clear.

Why Rounded Corners are Easier on the Eyes by anthony on 08/17/11 at 10:17 pm Designers use rounded corners so much today that they’re more of an industry standard than a design trend. They’re not only found on software user interfaces, but hardware product designs as well. So what is it about rounded corners that make them so popular? Rounded Corners are Easier to Process Anyone can appreciate the aesthetic beauty of rounded corners, but not everyone can explain where exactly that beauty comes from. Some experts say that rectangles with rounded corners are easier on the eyes than a rectangle with sharp edges because they take less cognitive effort to visually process. Scientific research done on corners by the Barrow Neurological Institute found that the “perceived salience of a corner varies linearly with the angle of the corner. Which object is easier to look at? We’re Conditioned for Rounded Corners Which object would you trust with your child? Rounded Corners Make Information Easier to Process Conclusion References

9 Useful Techniques for User-Friendly Tables by anthony on 07/11/11 at 12:33 pm Tables are great for displaying information. But making them user-friendly is a challenge. One reason it’s challenging is because the table grid limits the amount of information you can display in a table cell. This means you have to figure out how to display the information the user needs without displaying too much of it. The following techniques solve these design challenges so that users can read and process your tables with ease. 1. A table will have multiple columns, so you can’t make your columns too wide. It’s unnecessary to display every digit of a number. 2. Data abbreviations help condense information. 3. It’s important to make your columns thin, but it also important to make your rows short. 4. The bad thing about a long table is that you lose the column headers when you scroll down deep. 5. When users scan a row, their eyes can easily trail off and accidentally fall into an adjacent row. 6. 7. 8. 9. Conclusion

When to Use White Text on a Dark Background by anthony on 04/28/11 at 11:11 am Many websites use black text on a light background to display their content because it’s easy to read. However, using white text on a dark background also has its advantages. Knowing when to use one over the other will allow you to safely apply these techniques to your design without hurting user readability. When it comes to text on websites, users either read or scan. Reading involves focusing on words for a thorough comprehension of the subject. Paragraph Text The kind of text that users read is paragraph text. White also reflects all wavelengths of light. That’s why a better choice for displaying paragraph text is black text on a light background with a tint of gray. However, if your site uses a dark background, display your paragraph text in gray instead. Headings, Titles and Labels There is a time when white text on a dark background works well.

12 Useful Techniques For Good User Interface Design - Smashing Magazine Advertisement Last week, we presented 10 Useful Web Application Interface Techniques471, the first part of our review of useful design trends in modern Web applications. Among other things, we highlighted embedded video blocks, specialized controls and context-sensitive navigation. This post presents the second part of our review: 12 useful techniques for good user interface design in Web apps. You may also want to take a look at the following related articles: 1. One of the most significant elements of a good user interface is visibility of the system’s status. 7Yammer8 applies not one but three effects on all new messages in a feed: fade in, slide down and highlight. However, this dynamic nature means that when you click on a button, the page doesn’t refresh but something does happen. 9Backpack10 applies a highlight effect to all new items in a task list, which lasts for a second before fading out. One great way to do this is with animation. 2. How do you implement this? ... 3. 4. 5. 6.

UI research – speed matters and 10s+ page load is a killer | The Earlier this week usability expert Jakob Nielsen (famous for his eyetracker studies) published the results of some research into the importance of page response times to user experience and perceptions of brand. In his words “users really care about speed”. In Jakob’s assessment speed matters for two reasons: human limitations, espescially in the areas of memory and limitation human aspirations – fast interfaces make us feel like we control the computer (a feeling we like) whilst slow interfaces make us feel like it is the computer that is controlling us (not so good…) In interviews Jakob has found that slow site speed is something which sticks in the minds of users when thinking about services they have used in the past. Jakob proposes three response time limits: 0.1 seconds gives the feeling of instantaneous response — that is, the outcome feels like it was caused by the user, not the computer. Thanks to UX consultant Ian Collingwood for pointing me to this post.