5

I have a website with some app-like features like drag and drop. I use the standard indicators for these features, but testers don't discover them in user tests. When these features are pointed out, testers express surprise that a website would do things that they only expected an app to do.

So how can I indicate to users that they should treat my website like an app and interact with it the way they would with an app?

hello world
  • 51
  • 1
  • You mention that you already use "standard indicators" for these features. Could you give some examples of those indicators? – Matt Obee May 15 '13 at 14:13
  • @Matt Obee, The drag and drop has a "handle" with a 3D effect and a ribbed texture like you would see on a scroll bar. Mousing over it changes the cursor to a grab hand. I think if users expected to interact with an app, it would be clear to them that they can drag and drop it. Unfortunately, they aren't expecting that from a website. – hello world May 15 '13 at 14:17

2 Answers2

4

Design it like an app.

If you want someone to interact with your website like an app you need to use the same frame of mind someone designing an app would use. Most of the documentation I've read on designing for IOS involves much more about user interaction and involvement than any technical gadgets or features. There are some excellent pointers on designing IOS apps available.

If you keep this frame of mind when designing, then the users shouldn't see that it's a web page or an app, they should only see what you want them to see because they will be so involved as to not notice the mechanics. Remember that even the most popular apps have instructions and examples of usage, they may not seem like it at first because they are really good apps.

AbsoluteƵERØ
  • 741
  • 3
  • 7
1

A simple solution would to provide a simple textual description which informs users that they can drag and drop as shown below

enter image description here

Another option which you can possibly implement is that when an user hovers over an element which can dragged and dropped, you can provide a tool tip informing that this element can be dragged and dropped.

I also recommend looking at the excellent answers provided in this question How to visualize the possibility of drag'n'drop?

I am not sure what other features you are implementing but something like swiping can also be easily informed by a visual affordance like this

enter image description here

Community
  • 1
Mervin
  • 43,967
  • 8
  • 104
  • 188
  • Thank you for your reply, but this isn't a drag and drop issue. That was just an example of the app-like features I have. The issue is that users aren't expecting the site to behave like an app because they see it as a website, so the usual feature indicators aren't being interpreted the way they would if a user expected an app. – hello world May 15 '13 at 14:39
  • curious,is this sized a like a full sized desktop app ? – Mervin May 15 '13 at 14:41
  • Hmmm, I'm not sure what you mean. It's a website, so it's the size of the user's browser. – hello world May 15 '13 at 14:43
  • Was just wondering or you could put a mobile overlay on it which informs the user that the affordances associated with mobile are applicable to it – Mervin May 15 '13 at 14:44