Posts from "June, 2015"

How To … Quickly Find And Add Elements

A few days ago, we released our shiny new and re-designed stencil palette bringing you an even better prototyping experience. One of the exciting new features is the stencil search atop the palette which combines with a “Quick Add” function to help you save precious time while prototyping. Now you can find elements even faster and add them to your prototype straight away. And here is how it goes …

 

Step 1: Search an element

The stencil search is available in the Page View where pages are edited. To find the desired element, simply start typing the first letters. This will activate the stencil search and automatically filter the palette to only show stencils that match your search. This works at any time, provided you aren’t editing or have selected any element on the page. You can search stencils, icons, uploaded images and even custom stencils – everything is searchable!

Find your element with the new search bar

Finding an element using the new stencil search

 

Step 2: Add stencil

Once you have spotted your element in the search results, either drag and drop it onto the canvas with your mouse or use the arrow keys to select the stencil from the search results and hit “enter” to add it to the page. Hit “enter” again to keep adding more of the same stencil.

Use your cursors to quickly add an element

Quick Add: Using the arrow keys and “enter” to quickly add an element to the canvas

Hint: Stencils with multiple variants (e.g. icons, arrows, charts or flowchart elements) appear under one generic symbol in the palette, but will be listed with all variants in the search results. If you drop the generic element onto your canvas, a pop up will allow you to choose from the available options.

Choose an icon

Choosing an icon from the icon selector

 

That’s it! You have successfully added elements using the re-designed stencil palette and the new stencil search!

Do you need help finding your elements? Then do not hesitate and drop us a line via support@pidoco.com or Facebook and Twitter.

Happy Prototyping!

New element search makes prototyping easier

At Pidoco we work hard on delivering a great prototyping experience and are constantly improving our tool. This time we have re-worked the stencil palette, a core part of how prototypes are created, to save you precious time while building your prototypes and make prototyping even more convenient and fun. So what is changing?

 

1. New design

Let’s start with the obvious: we improved the design of the stencil palette. As of today, the palette comes along with a neat new design that is not only pretty, but makes it easier to find the stencils you are looking for. The former stencil categories have been removed and similar stencils have been grouped to reduce the total number of elements, so you won’t need to scroll as much. In addition, we have moved the options to upload images and create custom elements (called “Custom Stencils”) to the very beginning of the palette so you can easily access them whenever needed.

The new flat design

Stencil palette with new design

Where similar stencils have been grouped in the palette, you will find a little number after the stencil name that indicates how many options are hiding behind the stencil symbol. The arrow symbol, for example, represents 16 different types of arrows and lines.

Choose your arrow type

Choosing an arrow type from the arrow selection dialog

 

2. Stencil search and Quick Add capability

With the release of the newly designed stencil palette we are also adding a new feature that you will love: a stencil search. Located atop the stencil palette the search bar will considerably facilitate your work. At any time while editing a page simply type the beginning letters of the stencil you need. This will activate the search function and auto-filter the stencil palette. Then use your mouse to add the desired stencil or simply use the arrow keys to select the element and hit “enter” to add it to the canvas. Hit “enter” again to keep adding more of the same stencil. You can search anything from stencils or icons to custom stencils and uploaded images.

Search bar in the stencil palette

Using the new search bar to find a text stencil

 

3. Creating Custom Stencils

One of the great time savers in Pidoco are Custom Stencils: These elements can be custom built from existing stencils and serve as templates or masters that can be reused and easily updated. Creating a custom stencil will become easier with this release as we have moved the feature right into your sight at the top of the stencil palette. Simply click the “Create Stencil” button and start editing your custom stencil. While we were at it, we also gave the Custom Stencil canvas a new look to make it easier to distinguish it from the page canvas.

Create a custom stencil

Editing a custom stencil

By the way, all custom stencils appear at the end of the stencil palette and are visually marked.

 

4. Uploading images

Just like Custom Stencils, uploading images is a great way to save time and expand your stencil pool, e.g. by adding your own icon libraries. You can even use uploaded screenshots or design comps to quickly piece together an interactive prototype using our Action Area to create transparent hotspots for links or gestures. With this release, you will be able to access the image upload much more easily while editing a page as we have moved it to the top of the stencil palette. All uploaded images will be listed at the end of the stencil palette, just like your custom stencils.

Upload an image

Uploading an image

 

5. New icon selector

Pidoco features over 300 icons you can use in your prototypes. You wil find almost anything you need, from social media icons to common toolbar symbols. To help you pick the right icon even faster, we have added a new icon selection dialog that gives you a quick overview of all available icons. Now, instead of having to find the right icon in the stencil palette, you can simply add a generic icon to the canvas and then pick from 300+ icons via the dialog. Picked the wrong one? No problem – double-clicking the icon will reopen the dialog and let you pick a different icon.

Choose an icon

Choose an icon

 

6. Easy page set-up

Last but not least, we are making it easier to find and change page settings. Although strictly speaking it is not part of the stencil palette, this new feature will save you lots of clicks by giving you direct access to page size information and the context menu where you can change page size and other page properties via a new information element atop the page canvas.

 

Easily change the page dimensions

Easy access to page properties in the context menu

How do you like our recent makeover? Drop us a comment here or via FacebookTwitter or Google+ or contact us via support@pidoco.com. We are looking forward to hearing from you!

 

By the way, did you know that you can submit feature requests and other ideas in the Pidoco Forum? Simply make a suggestion and all other users can vote on it. Our developers will comment and keep you updated on the status.

 

Happy Prototyping!

 

PS: You are not a Pidoco user, yet? Why not register for a free 31-day trial today?

Top 10 UX Pitfalls

You can’t wait to get your new product off the ground and out into the wide and open internet space! But beware: There are a number of UX mistakes out there waiting to rain on your parade. Remember that UX is more than just a neat design or catchy layout. Here are our top 10 UX pitfalls and how to avoid them.

 

#1 Poor content

business-762538_1280

Congrats, your site finally launched showing off an awesome new design! Unfortunately, while spending plenty of time planning out the exact structure and layout of your site, you forgot about the content. Remember that great UX is not just structure and design – content is still king and the reason why people come to your site. Make sure to sit down with your marketing and content team early on to develop a strategy for creating and maintaining effective and useful content for your target audience. Avoid undermining your UX by second-grade content or outdated content and keep in mind that content requires updates on a regular basis or you will risk boring and losing users. When redesigning a site, critically analyze its content, i.e. text elements, pictures, videos, to decide which elements have become obsolete or should be replaced with new information.

 

#2 Too much content

196H_2Just like content can be too old, there can be too much of it. While you may have a very specific vision for your site circling around in your head, keep in mind that internet users have incredibly short attention spans and don’t usually read all of your texts. The vast majority of visitors will leave your page straight away if they can’t find what they are looking for quickly. So, don’t swamp them with too many facts and figures and risk losing them to your competition. Critically evaluate which content really is relevant to your audience and prioritize important content. Consider visually highlighting the most important facts or main features to aid the user in digesting the content of your site. Avoid lengthy copy, for example by trying to cut word count in half. And of course, make sure that the information provieded are not only up to date, but precise, effective and useful. You know best what your target group is interested in, which language they speak and how you can trigger them best. So make sure that your site’s UX isn’t undermined by an information madness and turn your visitors in loyal customers!

 

#3 Ignoring platform specifics

nature-laptop-outside-macbook_2

You are looking to make your product available on different mobile platforms to make it truly “cross-platform”? Great idea: With an average of 3.3 hours spent on their smartphone each day, 85% of the people consider mobile devices an essential part of their everyday life. But remember that the big mobile platforms have not only similarities, but significant differences as well. So don’t sacrifice great UX by cutting corners and releasing the exact same version for all platforms. Make sure to understand and account for the specifics of each platform when going mobile with your product. There’s a fine line between being consistent across platforms and frustrating users with a UX that doesn’t fit in with what they are used to.

 

#4 Ignoring UI guidelines

apple-iphone-desk-officeEach of the big mobile platforms provides designers with very detailed guidelines, but since you are an absolute ace and about to revolutionize the market, you listen to your intuition to design what feels right. Don’t! Depending on the platform, users expect certain layouts, behaviors or navigation options in their apps. Avoid frustrating them or, even worse, losing them by ignoring UI guidelines. Stick with the recommendations and deviate only where it is absolutely necessary, for example because it serves a very specific purpose. Favor industry standards and best practices over individuality: Just remember how often you facepalmed due to hidden menus or buttons, unclear icons, blurry gestures or navigation paths and confusing visual effects. Reading and following the applicable human-interface guidelines – at least for the commonly used systems iOS and Android – should help you create a pleasing experience for your users.

 

#5 No prototyping

You have done your user research, have sketched down some ideas and perhaps even created some wireframes or a design comp and think you’re all set? But you’ve forgotten one vital step: You didn’t build a prototype! While static wireframes or mockups are a great way to flesh out some of the basics in terms of structure and design, they do not help you figure out if there are issues with the navigation flow of your product – and you know the devil’s in the details! To make sure that you have covered all major issues to tackle during the design process, you should build a real prototype as early as possible. This will allow you to uncover weak points of your product, like a poor navigation, missing native gestures or other problems and will show you any areas of your product that need animations, changes or other special attention that will require significant time during design and may have been overlooked during project scoping. Prototyping will also give you more confidence in judging and planning for sufficient design and implementation time. So, to avoid unpleasant surprises, better start prototyping now instead of jeopardizing your product’s well-being.

 

#6 Too much prototyping

Prototyping is a critical part of the design process, but with ever more powerful prototyping and wireframing tools at our hands, it’s easy to get tricked into creating all too elaborate prototypes and get lost in unnecessary details. Don’t waste time on pixel-perfect prototypes that will be thrown away anyway in the next iteration. Instead, focus on the important aspects of your product. Design the things that are controversial, not what is common sense. Instead of trying to preempt the visual design, spend time on developing alternative solutions to UX problems that you can test with users and then pick the best-performing option. Most of the time, you can gather great feedback with simple interactive prototypes that model the flow of your product. Remember that there’s a trade-off between time spent and the benefit of being able to get feedback early on in the design process using prototypes.

 

#7 No testing

What you gain on the swings, you lose on the roundabouts. You may save time by skipping the testing, but you may pay for it later with a suboptimal UX. Sure, you may not have endless time to test every teeny-weeny bit of your product, but without any feedback from real users you will never be able to understand fully how they will be using it, what the shortfalls and potential UX problems are or what your customers love about it. This means you will not be able to deliver the best UX or evolve your product to match exactly the needs of your users. Avoid this by planning for sufficient testing time during the design stages of your project and build in a functioning feedback loop. Also, make sure to test with real-world users in real-life settings, so you can detect problems related to environmental parameters such as operating system, browser, type of device or even the situation in which users are engaging with your product – the context of use. Often, just five people are enough to detect up to 85% of the problems. If in a crunch, you can also set up an in-team test or ask a few power users of your product for an in-depth interview. Testing really pays: The more issues you can solve before the release, the less time you will be wasting on fixing them later or winning back frustrated users.

 

#8 Ignoring feedback

We all don’t like getting our noses rubbed in the mess we’ve created. Dealing with criticism on one’s work can be difficult, but the solution is not to ignore the feedback because these are just some users’ opinions. Doing so means risking that your product’s UX will not be what it could. Instead, remember that every piece of feedback is like a little present – users are taking time to tell you how they think you could improve your product. Once, test results are in, better start the treatment immediately. Prioritize, which issues are critical and need immediate fixing. Sort out feedback that is related to strategic design decisions. But listen carefully: Are you possibly trying to solve the wrong problem? Or may you have picked the wrong target audience? Early feedback can give you insights beyond product design that may change your entire product strategy, since you may uncover new use cases or find that the ones you were adressing are irrelevant. Don’t waste this chance!

 

#9 Trying to be unique

one-way-street-582635_1280

Yes, your product is your baby! But you don’t need to be unique in your design. Trying to be too original can be a UX liability, especially when it comes at the expense of ignoring known user interface patterns just for the benefit of creating a unique UI. Doing so will likely pose a burden to your users as they will need to learn your UI in order to understand and cope with its unique behavior. Most of the time, using native UI elements and sticking to well-established patterns is the best way to go. Avoid burdening your users with novelty and instead focus on simple designs that make your branding stand out. This will also help you prevent users from leaving because they feel as if you didn’t care about them, which 68% of them tend to do.

 

#10 Lack of communication

goats-173940_1280More often than not you will be working in a team consisting of such diverse roles as product managers, designers, coders, marketing experts or business analysts. Each one brings a different point of view to the table, which can be difficult if each person believes they know best. This can quickly result in a war of opinions and put your project’s success at risk. Avoid becoming one of the 97% of websites that fail at UX by making time for communication at each stage of the design process. Try to facilitate discussions and make sure that goals are clearly communicated and accepted and that solutions derive from well-understood problems. Ideally, you have already established some UX principles or even developed a UX guide that can help steer discussions the right way or avoid lengthy arguments. It also helps to have clear team structures with clearly define roles and decision-making processes and regular meetings, perhaps even a communication guide. Also, think about involving different roles in user testing so they can whitness how users respond to certain design decisions and make room for informal communication, such as lunch-and-learns or hackathons to improve communication between team members. Learn from each other’s experience and focus on creating an amazing product!

 

Images used are bound to Creative Commons Deed CC0.