Depicting hardware elements


#1

New to Axure so apologies if this topic has been covered before. Building a prototype for a multi-function display that has hard (physical) button around the central display, as well as soft (touchscreen) button within the display screen. How/can I do this in Axure? Want to be able to build and test interactions using both hard and soft buttons.


#2

If you want to visually represent a physical control as well as digital UI, all within an onscreen prototype, I would recommend just taking a picture of the physical device, or use rendering or other realistic looking graphic, and place that as an image behind your “display screen” area. This is often used for showing a mobile app on a smart phone device, or custom embedded UI and hardware, like a kiosk or medical device.

  • You can then place Hotspot widgets over your physical buttons to handle button clicks, toggle flips, knob rotations, etc.
  • Or, for added visual feedback and realism, create graphics for button down states, knob rotations, door sensors, etc. and build a dynamic panel with states, like “Up” and “Down” for a button.
  • You can crop and slice an image into separate rectangular areas to make it easier to work with different interactive areas. (right-click an image to access these tools)

If you want to use an actual physical button or other control as input to an Axure prototype, you’ll need to map the button states (pressed, released) into a keyboard input device. There are many ways to achieve this “physical prototype” keyboard mapping, such as using an old keyboard, a foot pedal button, or Arduino kit. You can search for tutorials on this part, as it is outside the scope of Axure itself. The main thing is to get your physical interactions represented on a computer as keyboard strokes. Then in Axure you can handle them with conditional cases on the Page Key Down and/or Page Key Up events.

If you want to create an actual physical mockup of your multi-function display device, you can get a “bare bones” display screen of the correct size and resolution, and attach it as an additional display monitor to a computer and pipe your prototype to that screen device. Or, you can use a mobile phone or tablet to run your prototype and place it in/behind a device mockup/panel. I’ve used everything from cardboard to plywood to 3D-printed and actual case parts to house a phone/tablet/display and get pretty realistic interactive mockups.