5

i´m working on a App for mobile devices (starting from smartphones with 800x480 res. till tablets 1280x800res). The app provides the function for checking tools of technicians in a workshop. The app shows a list of all tools the technician owns. When the check of the tools is peformed each tool can have one of this 3 results: ok, damages, lost.

The tool is designed, that the OK result is an optional input, because it is the expected result. "DAMAGED" or "LOST" has to be stored in the tool.

Now i´m searching for the best solution to desing an responsive data-row in the app, which will work on small phones an big tablets. It should work with less input clicks as possible, depending on the device.

Should in such app´s always the whole row be clickable with an standard-action?

Idea 1: No solution to store the "OK" result, "damaged" is the expected standard result

Col1: Status-Icon

Col2: Text of row "Screedriver 5mm" is clickable and store "damaged", Status-icon change for damaged

Col3: Icon on the right side of the row with "lost", click stores "lost" and status-icon will change for lost

Idea 2:

Col1: Status-Icon

Col2: Text of row "Screedriver 5mm" is NOT clickable

Col3: Option group on the right side of the row with "ok-damaged-lost", click stores the selected result and status-icon will change for selected result. On small devices the group will be shown under the text

Idea 3: Same as idea 2, but the option-group will be displayed after click on the text-row. saves space, but costs on klick more

What do you think about my ideas? Do you have better ideas?

edit: Image added: enter image description here

Improve this question
4
  • 1
    Hey @user22557, maybe you could visually explain your three ideas. If you edit your post and click UI Wireframe, it lets you create a mockup. This would be helpful in best understanding your question.
    – slawrence10
    Dec 23 '12 at 14:05
  • pls may you help me, don´t find a button for "UI Wireframe"
    – Eric
    Dec 23 '12 at 15:05
  • found in the bloq of balsamic where the button should but, but it dosn´t appear for me, don´t know why
    – Eric
    Dec 23 '12 at 15:16
  • 1
    You need 10 reputation to post images, of which Balsamiq mockups are classed as. In the mean time you can create an image elsewhere and link to it here and we can import it into your answer for you until you get the reputation to do so yourself.
    – JonW ♦
    Dec 23 '12 at 16:07
1

How about having the icon in col 1 function as a dropdown to change the status of the tool? That way You don't repeat information in a possible select-field and you can have a short icon to display the status, while the drop down then contains icon & descriptive text. The icon alone should be small enough to fit into any responsive layout.

Improve this answer
1
  • this solution will work an small devices, but waste space an biger tablets. maybe i combine it: on big devices i use my first version of the picture, on small devices first the icons are not displayed. with click on the row, the icons will overlay the text of the row. overlay should not be a problem, the user saw the text before he clicks on it...
    – Eric
    Dec 23 '12 at 23:56
0

I think that you may try to use swiping left/right for switching the state of the tool and show the state description in the row. I think that OK state should be assumed as default:

enter image description here

I use a background to differentiate the states from each other, but you may use icons or just colored labels (Damaged or Lost), etc.

To undo the action (and place the tool into the default state) user may just repeat the swiping.

And if you wish to see this behaviour in action, you may have a look at Clear for iPhone or at Reeder app.

I also think that you may use a slightly different behaviour for the tablet version of your app and show a buttons like on the sketches you're provided.

Improve this answer
2
  • thx, looks good on the small devices. but i want to use one code for all devices includind desktop, so the sliding would influence this. normally the users have a biger device, so the solution should be optimized for this kind. .. have to investigate more solutions....
    – Eric
    Dec 26 '12 at 10:28
  • @Eric I really think that it's better to separate design and maybe behaviour for the small devices and tablets/desktops. They all have differences: phones has a smaller screen, tablets has a bigger (almost desktop-like screen) but are touch devices. These difference could (and will) influence design and behaviour. And that's good because I believe you should follow users and how they're using all these devices (which are different).
    – alexeypegov
    Dec 26 '12 at 10:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.