...
...
...
...
...
...
...
...
...
...
| Table of Contents |
|---|
Image Best Practices
In terms of what kinds of images to use to communicate ideas to low-literate users, past research indicates a preference for life-like line drawings over pictures or super cartoonish things (though trade-offs include that photos, for example, may be easier to update.).
...
When using illustrations, it is also important to maintain context (e.g. it is better to show a womb with torso, arms, and legs, rather than just a womb by itself.)
Image Sources
You can find some open-source images that you can use in your applications in these places:
- CommCare Exchange - some CommCare users may chose to share their multimedia
- OCHA Humanitarian Icons - some background on this image set is available here
- ORB - library of resources developed for Frontline Workers
- Noun Project - free library of stock images that can be downloaded in many colors
Image Format
Images in CommCare should be formatted as 32 bit PNG files. Transparency is supported on most phones.
PNG is the recommended file format. You can use other image formats, if supported by your phone, but the file-paths that are automatically generated in the form builder will end in "png." If
If you want to use a different format, you will need to manually change the file-paths.
...
On Android phones, there is also limited support for automatic resizing of images. Documentation for this feature can be found here.
Questions
Question Type | Nokia 2700c/C2 | Lava Iris |
|---|---|---|
Text, number or date Input, single line of text for prompt | 225 x 165 | ~ 600 x 600* |
Label input, single line of text for prompt | 225 x 165 | ~ 600 x 600 |
Two option select input (e.g. yes/no), single line of text for prompt | 225 x 140 | ~ 520 x 520 |
Each additional line of text for prompt (1 line of text is recommended) | Subtract 25 pixels from height | Subtract ~40 pixels from height |
Each additional option for a select question | Subtract 30 pixels from height | Subtract ~40 pixels from height |
*All guidelines for Lava phones are approximate. Start with these and resize as necessary.
Choice for Multiple Choice Questions
Question Type | Nokia 2700c/C2 |
|---|---|
Font Sized - Won't increase size of line | N x 20 |
Icons
Module/Form Names | Nokia 2700c/C2 | Lava Iris |
|---|---|---|
Single, double, triple lines of text for module or form names | 50 x 50 | ~50 x 50* |
*If icon is not square, then resize so the largest boundary (height or width) is 50 pixels, and the other is proportionately smaller
Documentation for Image Sizing on Feature phones can be found /wiki/spaces/commcarepublic/pages/2143954582.
Recommended Tools
Below are some free tools we have used in processing images. No guarantee that they will work as they are third-party programs, but we have had good experiences with them.
Paint.net: Free software for editing images. Compatible on PC.
IrfanView: Free software for re-sizing images and converting among file types. Can also do re-sizing and conversion in bulk if you have lots of images to process at once.
Greenshot: Free software for taking and editing screenshots. Very useful if you want to capture images from documents, websites, or a phone emulator.
Some PDF to Word Converter: Can extract images from a PDF file.
Resize Your Image: can upload individual photos and resize them.
Image Sources
You can find some open-source images that you can use in your applications in these places:
...