as part of my day job i have to develop new features based on UX mockups created by our design team and shared using invision, an online prototyping tool. this gave me a thought - what if we used this idea for documenting grid based apps?
instead of static images and a wall of text we could have interactive documentation which would to some extent mimic what the actual app does, and therefore be much easier to understand and learn. i’ve put together this quick prototype to give an idea of what it would look like (using orca’s heart app):
click on various buttons to see what they do. if you click on a button that is not currently mapped, it’ll highlight the areas that are clickable. this is just a simple example that doesn’t do much. one thing i don’t like about invision implementation - you have to click somewhere to determine which areas are clickable, and i don’t see a way to make it show tooltips when moving mouse over.
i haven’t checked other similar tools, which might work better for this purpose, but: 1) they are meant for building any custom designs, so an overkill 2) we would depend on that service. what if we build our own tool instead? this is my challenge:
- keep it simple, no visual editor, it could consume json/yaml/custom format file describing the app
- the doc would describe all the various screens
- have the option to highlight some buttons (background colour / frame) and apply text labels
- apply actions to buttons - switch to different screen / show description / show animation
- simple animation - highlighting buttons in sequence to describe some actions
i’m thinking something very minimal for start and something that could be easily hosted / would play well on tablets / offline. is somebody willing to take on this challenge? (the reason it’s a challenge is because i have very little knowledge of js, especially the latest frameworks, and have no idea of how feasible this is).