Web Design and SEO Blog

May20148

Dark Patterns in Design

by Felix Wolfstrom in Design

Take a moment to think about a really awesome experience you had when using an app or website. Hopefully that was easy; even if it wasn’t, I feel confident that this next exercise will be. Can you think of a website or app that was dissatisfying, frustrating, or intrusive to use? What caused that experience? Was it the result of the website or app’s design? As a human interface designer, these are questions that keep me up at night.

Goals of interface design.
Interface design is the art and science of creating a place where people can intuitively get things done. In a commercial context, the interface must also draw attention to a company’s strengths and facilitate revenue. While pursuing these goals, it’s important to keep ethics in mind, much as physicians take the Hippocratic Oath — first, do no harm.

Dark patterns.
When ethics are not a deliberate part of the design process, dark patterns can emerge. Dark patterns are interface design choices intended to trick the user, often into spending more money or giving up unnecessary personal information. Sometimes, dark patterns are the result of deliberate action by the designer; other times, they are mandated by a designer’s employer because they appear to generate greater revenue. Design choices are ethical choices and can clearly signal a company’s intent — are they trying to help you do great things, or are they trying to take advantage of you to make a quick buck? When companies try to trick their users, the backlash can be immediate and long-lasting.

What do dark patterns look like?
Dark patterns appear in many shapes, and are unified by using deception to accomplish business goals. For instance, any interface that encourages you to make a mistake to promote a business’s interests is a dark pattern — an advertisement disguised as content on a webpage, a checkbox that must be checked in order to not receive a newsletter. They exist in the brick-and-mortar world as well: hidden charges on phone bills, aisles laid out to confuse shoppers and keep them in-store, and super-limited inventory on sale items used to get people in the door, to name a few.

Case Study: Parallels
An example of obvious dark pattern usage comes courteous of Parallels, the popular virtualization software. With every purchase of Parallels 8, they added something to your shopping cart without telling you: an Extended Download service ($6.99) that allowed you to re-download the software for free. Not only did they add something to your cart without asking: the service itself was entirely redundant, because the software was already a free download from their website. In addition to this tricky bundling, the shopping cart prominently recommended buying a backup CD ($14.95) of the software — the same software that could always be downloaded free from their website. Perhaps this CD would be useful for those without reliable internet access, but its existence seems more like a cynical ploy to exploit people’s natural aversion to loss.

Purchasing Parallels 8 Online


After a tidal wave of criticism (and likely, lost sales) from their customers, Parallels backpedaled on their use of dark patterns. Parallels 9, the next iteration of their product, did not sneakily add anything to the shopping cart without asking — but still recommends the useless Extended Download Service. This is clearly less of a trick, but they’re still trying to charge money for a product with no merits.

Purchasing Parallels 9 Online


Obvious dark patterns become easy to spot once you start to look for them. Let’s look at a more subtle example: a series of interface changes made by Google to Gmail, their popular email product.

Case Study: Gmail
From the time of its launch until late 2010 or early 2011, Gmail stuck with a fairly consistent interface. In the top right it displayed your email address, access to settings, and a link to sign out in the prominent corner position.

Gmail's Legacy Layout


In their first big change (late 2010 or early 2011), Google chose to hide the sign out button in a menu — you could get there by clicking on your name. Because Google gathers individualized data about user habits, making it harder for users to sign out is advantageous.

Gmail Layout, Early 2011


The next significant change came midway through 2011 when Google launched Google+, their social media platform. The prominent top right corner (and top left corner) was taken over by Google+, with an interface to share and receive notifications. Not particularly devious, but it provides insight into their priorities.

Gmail Layout, Late 2011


In their most recent significant change (sometime in 2013), Google takes advantage of how we expect things to work. We know from their previous redesign that they want us to interact with Google+, and now they force the issue. When you click on your name — which is in the same position it has been — you are taken directly to your Google+ page. The menu to sign out has been hidden somewhere new and unexpected, beneath the tiny photo in the corner.

Gmail Layout, Late 2013


The changes to Gmail throughout the years may seem harmless compared to the extreme dark patterns that can be encountered elsewhere. Still, Google established an expectation of how their product worked (how to sign out of Gmail) and changed it for their own advantage. When I experienced this change, I felt tricked — they’d exploited my expectations to push me into Google+. Google offers a number of valuable products, but by tricking me they have undermined my trust in their company. As a result, I use their services less and am unlikely to recommend them to others.

Further, more egregious examples abound: free services that collect credit card information and automatically enroll you in a paid premium service unless you cancel (some don't even provide a reminder before renewal), hidden costs only revealed at the final stage of checkout — the list of deceptive and unethical practices is a long one.

Using design for good.
Of course, interface design is not a series of black and white choices. There is plenty of moral grey area — such as using the default state of an interface to your advantage. These might be checkboxes that appear when signing up for a service that give permission to share your personal information or send you newsletters. While you’re not necessarily being tricked, companies who ask you to opt-out rather than opt-in are taking advantage of our natural inclination towards the path of least resistance.

JTech Newsletter Signup


We don’t ask people to opt-out at JTech — although we’re optimistic that people will find this web development blog and our newsletter interesting, we don’t make that assumption on your behalf. You won’t find any boxes already checked when you decide to get in touch with us. Instead of taking advantage of human psychology and expectations to trick people, we can use that same knowledge to create designs for advanced websites that are intuitive, friendly, and help people enjoy their experience.

Deception and its fallout.
The temptation to take advantage of the people using your website or app is obvious: companies do so because it tests well; more people will sign up for a recurring account, buy insurance packages, or sign up for your newsletter when deceived. It makes money. Because dark patterns can be profitable, it may seem naïve to believe that we should be working to help people with their goals instead of our client business’s immediate interests. However, using dark patterns can immediately drive people away — leading them to close your website in frustration, write a negative review of your business, or share their experience on Twitter.

At JTech we believe that web design should follow the same ethics you live by in the rest of your life. It may seem as though a small deception is a harmless shortcut to profit – this is simply not the case. Customers and visitors who feel tricked are more likely to turn to a competitor’s service or product. In the long run, using dark patterns also ignores the advantages of treating people well: building trust and credibility for your company and growth from a good reputation and well-designed product. When you lose a customers’ trust, they will no longer give your company the benefit of the doubt. Not only may you lose your customers’ business: they are likely to actively avoid your company’s offerings in the future and recommend that their acquaintances also steer clear.

Be aware of how your company is interacting with its customers — is it an honest, helpful interaction, or is it based in deception? Deceiving and blatantly monetizing your customers signals bad intentions and can ultimately cripple your credibility and success.
May20145

Gallatin Valley YMCA Updates

by Joshua Reynolds in Announcements, Design, Development

Gallatin Valley YMCA's Website
Gallatin Valley YMCA's Website
Now that it’s May, the snow has melted and we’ve updated the Gallatin Valley YMCA’s website. New imagery on each page behind their masthead highlights photos of kids having fun at the YMCA. The typography has also been updated with a clean look that matches the national YMCA. Some of the changes will only be visible for the Gallatin Valley YMCA’s newsletter subscribers: their program updates are sporting a new look to fit the aesthetic of their web design.

Our web development team has made an assortment of other small changes to their messaging and content scattered throughout their website to reflect their status as a dynamic fixture of our Bozeman, Montana community. We’re always delighted to work with the big-hearted team that make the YMCA a cornerstone of the Gallatin Valley.
May20141

Josh Completes Leadership Montana

by JTech Communications in Announcements, Industry News

Joshua Reynolds, JTech’s president and owner, is now a graduate of Leadership Montana’s 7-month curriculum for business, government and educational leaders in Montana. Leadership Montana’s program took Josh and his classmates to different communities across the state each month, learning about those communities and meeting with their leaders.

Leadership Montana’s course is comprehensive and created an environment where classmates form deep bonds — in addition to learning about Montana’s communities, Josh made many life-long friends with whom he looks forward to being an active alumnus and participating as a steward of Montana’s future.

Josh highly recommends Leadership Montana’s curriculum for anyone who wants to develop their skills as a leader in their community or organization and learn more about all that Montana has to offer. If you’d like to learn more about what Leadership Montana has to offer, visit their website: leadershipmontana.org
Apr201429

My JTech: Designing the Experience

by Joshua Reynolds in Announcements, Design, Development

The default file upload experience offered by various browsers: inconsistent across browsers and never a very elegant experience.
The default file upload experience offered by various browsers: inconsistent across browsers and never a very elegant experience.
On your phone you'll be able to upload photos and videos from your media gallery.
On your phone you'll be able to upload photos and videos from your media gallery.
We’re in the process of building My JTech — not just how it looks, but how it works. We’re designing the experience of running your business online, which means each detail needs to be right. Even more important is the big picture: all of My JTech working together in a predictable, intuitive way that gets out of your way and never leaves you guessing.

In My JTech, one of our goals is an interface that is simple to use — that allows you to get big, complicated things done, but never feels complicated while you’re using it. The complexity stays behind the scenes.

Case Study: File Uploading.
One important function of My JTech is the ability to manage your files. This includes everything from internal documents to event photo galleries, support PDFs to technical photos of your products. File uploading is provided by all browsers, but each platform is visually different, and all of them provide a dissatisfying experience. Unfortunately, for security reasons, the only way to upload files is to work with the default controls provided by the browser. This makes My JTech’s file uploading interface — which we hope you will find simple and elegant — extremely complex and difficult to program.

In My JTech, we will support batch file uploading, which presented interesting challenges. For instance, in certain places you will be able to upload multiple files at once. To make this work properly, we had to develop a queuing system so that each of the files in a batch waits its turn to be uploaded — otherwise, trying to upload more than a few files at once can cause snail-paced uploads or dropped connections. For even faster uploads, we optimize photos and illustrations to reduce their file size before the upload even begins.

We’ve tried to provide small, meaningful cues throughout My JTech’s interface: written prompts inviting you to upload change based on whether you’re on a phone, older computer, or newer computer; visual hints highlight useful functionality such as dragging-and-dropping files from your computer into My JTech. Progress bars offer feedback on the status of your upload, and thumbnails previews appear if you’re uploading images.

One of the innovations resulting from consideration of desktop and mobile platforms is how files can be shared from My JTech. Because we provide integrated business email, sharing images and files with your clients or business partners can be accomplished seamlessly without having to leave My JTech — simply choose the share menu, enter your recipient’s email and share your document! Sharing to email in My JTech avoids the need for app switching or downloading and attaching.

File uploading and management is just a small piece of My JTech, but attention to detail is carefully considered throughout our development process. We’re designing websites and web apps that are purpose-built to provide everything you need to run a business online. We can't wait to put My JTech in your hands for you to experience yourself!
Apr201424

Montana Health Network Updates

by Joshua Reynolds in Announcements, Design, Development

Montana Health Network's Custom Website
Montana Health Network's Custom Website
This week we’re rolling out a number of subtle improvements to Montana Health Network’s website. As their advanced site has grown — educational courses added and programs offered — we’ve looked at how their staff use the website and how the website’s design can better showcase the great material they’re providing. Websites are a living part of your business or organization, and as your organization’s needs change, so must your site. Even if your organization’s needs remain consistent, you may find that the way you use your custom website differs from what you’d anticipated when it was being designed.

Montana Health Network’s monthly risk management and worker compensation columns are an important part of their offering for members, so our web development team worked with them to create an improved space that showcases that content and allows members to search through the archives. Other updates include greater integration of their brand into the visual styles of the website, better structure for their programs and courses, and new immersive photography of Montana throughout their site.
Apr201417

Branding is not...

by Joshua Reynolds in Design

“Branding is not “a logo”, branding is not “an expensive manual”, branding is not marketing, branding is not superficial, branding is not nice, and branding is not a trick, branding is not multimedia. Branding is shaping the interface. Branding has turned into the discipline of shaping the interface between you and your customer and make the interaction as pleasurable and memorable and real as possible.”
Oliver Reichenstein

We came across this quote and thought you'd appreciate it. It's so important in what we do at JTech, since we build interfaces with which customers interact. To us, yes, branding is visual, but so much of branding is how using everything about a site "feels". That feeling is driven by everything from how quickly the site responds, to smart forms that guide you and help you as you fill them out, to consistency and intuitiveness throughout the site's interface.
Apr201410

Heartbleed OpenSSL Flaw

by Josh Reynolds in Announcements, Industry News

Heartbleed OpenSSL Graphic
Heartbleed OpenSSL Graphic
Recently the "Heartbleed" OpenSSL security flaw has been in the press. JTech Communications' servers were not affected by this flaw. This includes all JTech Communications sites and all of our client sites that are hosted by JTech. We monitor security issues very closely and know how important it is to you.

Thank you for allowing us to serve you.
Apr20148

Uploading Files in My JTech

by Joshua Reynolds in Announcements, Development, Tools & Tips

Uploading files in My JTech.
Uploading files in My JTech.
This week we’re announcing one of the many improvements in our new custom website management system — My JTech: a new file upload control! Our new advanced file control has a beautiful, simple interface and works great on mobile and desktop devices.

Here are a few of its convenient features:
  • Upload multiple files concurrently.
  • Drag-and-drop files from anywhere on your computer.
  • Progress bars will show you the status of your upload in real time.
  • Share images and files via email without having to leave My JTech.

File uploading and management is just a small part of My JTech, but we believe that every detail counts in web development. We’re designing My JTech to be an indispensable tool for doing business online and can’t wait for you to use it.
Apr20144

jtCount: An OmniGraffle AppleScript that Counts!

by Tyler Miller in Announcements, Development

jtCount
jtCount
Download: jtCount - An OmniGraffle AppleScript that Counts!

Tested and compatible with OmniGraffle 5 Standard, OmniGraffle 5 Professional, and OmniGraffle 6 Professional for Mac.

As JTech’s project manager I am always keeping an eye out for ways to save time and money throughout our production process. We use many tools internally to help us manage our projects, develop client-facing documents, internal documents, and reference material that helps us execute work more efficiently. All of our web development flowcharts and page wireframes are created in OmniGraffle, a program by The Omni Group. Like many pieces of Mac software that utilize Mac OS X’s built-in tools, OmniGraffle supports AppleScript, providing a useful way to extend its functionality and capabilities.

Our OmniGraffle flowcharts include many objects that represent items on the project budget, including pages, forms, and various features. As we iterate on the document with our clients, we translate the quantity of each type of budget item into a spreadsheet, which is configured with formulas to automatically calculate the project’s cost. The flowchart changes with every iteration, and a manual tally can be laborious. There's always that moment when your coworker counted a different number, after which the counting commences again.

So, I thought to myself, how great would it be if we could just run a script that automatically calculated the quantity of items based on some sort of unique value key? I spent quite a while searching forums and resource websites for an OmniGraffle counting script but was unable to locate one. Thankfully, our VP of Technology was willing to write an AppleScript for me, and jtCount was born. We built the script to be flexible, so that it could grow with our process. After using jtCount internally for a bit, I decided it might be beneficial for others out there with the need to count objects in OmniGraffle.

Here are some of the possible ways jtCount could be used:

Calculate and estimate cost, labor; generate shopping lists in various contexts:
  • Count trees, shrubs, and other plants in a landscape design
  • Count outlets, can lights, switches, windows and doors in architectural plans
  • Count capacitors, resistors, transistors, diodes, relays, etc in electrical schematics
  • Count atoms, bonds, molecules, etc in chemistry diagrams
  • Count individual objects, object groups, groups of groups, and on! 

The jtCount AppleScript for OmniGraffle iterates recursively!


If you find jtCount useful, please contact me to let me know how you are using it! And if you have any questions, use the same form and I’ll do my best to lend a hand.  In an effort to make this script useful to as many people as possible, I created a tutorial OmniGraffle file that will help people who are unfamiliar with AppleScript to customize it for their needs. The .graffle file is available for download in this post, with jtCount embedded. Feel free to share it with attribution.

Download: jtCount - An OmniGraffle AppleScript that Counts!
Tested and compatible with OmniGraffle 5 Standard, OmniGraffle 5 Professional, and OmniGraffle 6 Professional for Mac. 
Apr20142

New Website: NRTRC

by Joshua Reynolds in Announcements, Design, Development

The responsive NRTRC website on a mobile phone.
The responsive NRTRC website on a mobile phone.
JTech’s Montana web development team just completed an advanced website for the Northwest Regional Telehealth Resource Center (NRTRC) in Billings, Montana. NRTRC is an organization supporting Telehealth providers across the northwestern United States — Montana, Alaska, Washington, Oregon, Idaho, Wyoming, Utah and Hawaii. NRTRC’s focus is on providing expertise that can help Telehealth networks to develop and flourish, hosting an annual conference as well as providing resources such as webinars, white papers, articles, coaching, and more on their custom-developed website.

The custom site JTech designed for NRTRC is characterized by its clean design, dynamic content and flexible, responsive web design architecture that adapts for a perfect layout on any device. As the NRTRC adds their vast library of resources to their new advanced website, it will become a treasure trove of information for Telehealth providers and individuals interested in seeing how health organizations work together to offer better care for all.

Northwest Telehealth Resource Center: nrtrc.org