Tag Info

Hot answers tagged

22

I'm sure different people will have different views on how much or how little wireframes and prototypes overlap. What follows is how I approach the two: If you are considering an application or a website, and you look at the page level for example, a wireframe and a prototype are superficially the same things, from a physical perspective. They can both be ...


16

If you're building a web site or application, HTML mockups are far superior because you're designing the mockup in the format as close to the final product as possible. This allows you to set expectations much more easily, it constrains you to just what's possible in the final product, and it affords much greater flexibility. This convention is gradually ...


11

For prototypes I'd say that you need to get to the level of detail where you are able to explain and illustrate the functionality in a way that is easy to understand. However, it is also of major importance that no-one believes your prototype to be a finished (or nearly finished) product. In that case you run the risk that your customer either thinks that ...


10

As the User Experience Director for a company of around 175 employees, I'm often challenged with getting department managers to articulate their ideas without the knowlege of a designer. The best tool I have found (for us) is the web version of Balsamiq. Give it a try, although their server seems to be down right now which I haven't seen before: ...


10

I've found the most important thing is to set expectations. Stakeholders, especially those who are decision makers, tend to expect polished presentations, and so the idea of something being presented that looks rough and full of caveats simply seems wrong. In addition, make sure to: Put it in their terms, and make the purpose clear. Wait until you have ...


10

It doesn't make any sense to measure a UX designer's progress at making wireframes. Wireframes are just a way to communicate with other people and can take many forms, from sketches to mockups to "interactive" wireframes produced with software like Axure. Their purpose is to represent ideas in a form that can be discussed with stakeholders, team members and ...


10

Yes, they do. Low fidelity tends to get people to focus on the higher level aspects of the mockups, like the overall layout and concept. While with high fidelity mockups people tend to focus on the lower level details like "this should be two pixels to the left", or "this needs to be a different shade". That is one of the reasons that I recommend ...


8

It's a fidelity issue. The catch is that either document can be higher fidelity than the other depending on what you are focusing on. An HTML prototype is really the only way to truly mock up any interaction of even moderate complexity. There's simply no way to fully document interaction design within a PSD file. Conversely, if you're in an environment ...


8

SketchFlow which is part of Expression Blend Studio by Microsoft is really, really good... There's also Sketchify Justproto App Sketcher PowerMockup JustinMind


8

This open source library is pretty good to start with and covers many types of common gestures: http://gestureworks.com/icons-fonts Alternatively, this one is pretty good as well: http://gesturecons.com You could also try a short video or animated GIF images to make the gestures more explicit, VideoHive offers many footages you could use to that ...


6

The reason why we do prototypes is to convey ideas/concepts/solutions that can't be conveyed through showing static screens. I always use the rule that whenever you want to give a feel or an understanding of the flow in your application/web service you should do prototypes. It is with the prototypes that you can simulate how something might feel like. For ...


6

The nature of your deliverables honestly depends on the scope of the project, the work you're doing, and what kind of client you're dealing with. The biggest challenge you have to face is determining what the client expects and then providing them with that (or adjusting their expectations where necessary). For instance, a colleague of mine recently created ...


6

SVN isn't great because it has a high learning curve and is primarily used by developers. If you don't have a problem with that, go ahead and use it (or git, or hg, or whatever), but I think there's a better way. Handcraft (which I build) was designed with this problem in mind. Instead of using version control, you have distinct prototypes in your account. ...


6

When selecting a testing method you should always first ask what the goal of the testing is, for no one method will suit all possible purposes. At the most basic level, different methods are good for discovery, while others are good for validation. Paper-prototyping is a testing method for discovery and understanding, and is ideally used early in the design ...


6

Paper prototyping lets you forget about the constraints of the tool that you are using, and forget about the fine details so that you can focus on the bigger picture. That said, there are other tools that work well as substitutes. I often use Draft on my iPad as a replacement, and I'm sure there are other similar tools out there. The key is that when you ...


6

Start with the smallest form factor first (in your case the phone) since the lack of space will give you the opportunity to require you to define the primary focus of the app and what is the primary content that must be provided to allow the user to do his task and not allow you to add too much extraneous stuff. While moving up to higher form factors, ...


6

The straight-out answer to that is pretty simple: It's in the nature of a prototype to be beneficial. If it's not beneficial, then you're doing it wrong... If it's not beneficial, then it's not prototyping by definition... When you start prototyping, you need to know why you are prototyping. You need to know what the benefits will be. If you don't ...


6

If I'm creating a layout for a publication and it's in its initial stage, I'll use Lorem Ipsum. But when I'm creating prototypes for interfaces, I always use real data. You learn more from putting real content on there than you would with a block of random text. I also find that when I'm getting feedback from other people, it's useful for them to see the ...


5

One potential drawback of using HTML mockups are that the client could think that you've finished the application - even if you've told them what it is. Seriously, I've known people - both clients and managers - who on seeing a mockup using the tools you normally use to build the actual product think that you've done most of the work and are surprised when ...


5

I, personally, do not feel Axure prototypes are something for the stakeholder to view. They, like wireframes, are really a tool for the internal UX team. For what to show clients, I prefer to stay at the extremes of the fidelity spectrum...either paper/pencil sketches on one end, or relatively polished interactive prototypes on the other. The interactive ...


5

I saw this article a few weeks ago about a UX designer with a similar predicament. He solved the problem with a combination of a traditional Axure prototype and some clever usage of Google Docs. He details the amount of time he spent vs. the benefits at the end of the article. If you're a bit tech savvy and can't justify getting developers involved this ...


5

For starters, Balasamiq does have a very thriving community who do voluntarily design stencils/mockups of various interface elements and there are android elements available at The Mockups to go site (Android Controls) The IOS elements for Balsamiq can also be found here Do check out Axure's good student program. I am not sure if your students qualify for ...


5

I like the elegance of using hover effects (such as described in Konturs answer) however these will confound the study results because it will guide the user to know what areas not to click and over time, it will actually increase their success rates. In fact, I usually try to ensure that no cursor differentiation occurs at all- making it so that the cursor ...


5

The suspend control is controling the on/off switch - which leads me to this design. Mockup 1 shows on-state, mockup 2 shows off-state and mockup 3 shows suspended state: Both on and off are not in use, represented as disabled without anyone of them selected. download bmml source – Wireframes created with Balsamiq Mockups


4

Expression blend is a pure microsoft design purpose studio. The core usage of Blend is to assist Silverlight Developers & designers. Silverlight was introduced as an RIA technology. The core feature is code separation. The View - model are in separation. Blend provides rich support for designing your silverlight apps. which may not be possible with ...


4

In addition to Gary's excellent answer, I've seen good results from showing mostly sketchy prototypes with one or two more built-out concepts for some part of the system. That helps them to get a sense of overall look, but we didn't waste time and money building it all out prematurely. (This experience is based on watching interaction designers at my ...


4

It sounds like you're doing HTML prototyping with Javascript for the functionality iterations (Backbone.js wheee!) so let me approach it from that point of view. First off, doing things in HTML allows you to focus on the right details of the user experience, whereas with a tool like Axure or paper prototyping you're really zooming out too much to a ...


4

After testing many programs and websites i found that Fireworks is a very good options in case you have it, and if you need to export the sketch to html or pdf. But the best in my point of view and what I do most of the the time is using a pencil and papers without using the computer.



Only top voted, non community-wiki answers of a minimum length are eligible