Releasing date
Jan 2013
Focus area
Design
Tasks
To suggest the interface, which would allow for the user filling in the database with photos. To take into account, that the product database can increase in volume and image import procedure can be repeated multiple times. Take into account that 5% of photos do not match with products. To make the procedure quick and user-friendly.
Solution
We designed the key uploader elements, following the technical task. Find easy, and at the same time, comfortable solution, which allows for maximum optimization of image uploading procedure.

01. Start-up screen

The start-up screen of the image loader is free of any needless elements. Users are one click away from resuming or starting the uploader, changing the folder in settings/the path to image catalog, which he or she uses and from finding the product needed using Quick Search.
Quick Search. Operating principle is described
on screen 04.
Here the user can locate the path to the photos:
local folder, Flickr, Google+ and so on.

Also this section conceals the wok with databases
(loading, updating and so on).
Process bar, which shows the ratio of products
without photo to the general amount.
Click this button to start work or (if there was a session break)
to resume work from the place where you stopped. Upon clicking the user goes to
screen 02.

02. Image settings screen

This screen is the main run one. Functional concept: the list of products which need photos is displayed on the left, one product is on default (in this case a bottle of vodka “Russian Standard”5.0 liters), the first one in the list of products without image, or the one the user previously broke the session on. The uploader finds the photo for the product automatically and places it in the main work area. In the work area the user adjusts the image with crop-visualizer and presses “Apply”. The processed image of the product is set for the product and the user is automatically switched to the next product on the list on the left.
The list of products in processing by the user. Images with the photo are marked with Green.

Horizontal scrolling allows for easy and quick list navigation, both using up and down arrow keys on the keyboard and the mouse.

After the product is chosen, the Uploader automatically chooses the photo by name and it appears in the work area.
Also the info is taken from the database on what kind of contour is to be applied to the image of the product. In our case – a bottle.
The name of the
product and short
info about it.
The main work area is a visualizer
with crop function.
It allows to process photos in
a matter of seconds.

One can proportionally scale
the image, rotate around the axis,
move with drag&drop tool.

Thus, one can easily adapt the photo to the
parameters needed: size it, contour (the contour
borders are visible to the user). The area inside
the contour is not covered by the transparent
mask, unlike the area of invisible part of the image.

Product contour is determined automatically,
using the information in the database.
In 5% of cases the photo
auto fit does not function
properly (for example,
wrong image name) based
on the path in settings.
In that case the system
shows the corresponding
message and the user
will be asked to use the button.

Upon clicking the user goes to
catalog of images (screen 03).
In case when for
some kind of reason
the user wants to
skip the product
(for example no photo is available).
The user saves the
changes and switches
to next product in the
list automatically.

03. Catalog of Images Screen

Here the user sees all the images available and can choose any of it for the product.
Filter, which allows to exclude or show
the photos which are already assigned to
other products. The system shows only the available
photos on default (the ones not attached
to the products).
In the preview one can see the images available –
9 images per page and scroll though using
he mouse wheel or by clicking arrow buttons.
Click on the image
for the bigger
preview.
Paging allows for
the user to see
the page he is
currently on.
Click again to confirm the
choice and go back to
image settings page (screen 02).
The user can skip photo attachment for
the product at any time.
Go back to screen 02 by clicking
and automatically
choose the next product.
Cancel the action
and go to previous
Screen.

04. Search

The Quick Search line is available on any page and allows for finding the product needed at any moments time. User-friendly filters allow for creation of the most efficient search request to exclude the unwanted results.
Filter panel pops up upon clicking
on the Quick search line.
Upon making the request press “Find”. The Filter Panel is folded up and the results are displayed exactly
as the products on screens 02 and 03.

Miritec in figures

Next
more than
7000

programming hours each month are performed by Miritec engineers