- Two main boxes for the two languages that are being translated.
- Have a 'Save' option for the translated word/phrase/sentence.
- 'Save' folder in which the saved languages are separated by countries.
- 'Delete' option
- 'Swap' languages options
- Allow for a 'default language' option
- 'Countries' icon which takes user to drop down list of all the countries (may include an icon of the countries flags as well)
- 'Speak' and 'Scan/Take Picture' option (shown as icons)
- Sans Serif font
- Minimal colour palette -> not take away the attention from the information -> don't make it look overwhelming and tacky to use.
After writing down these features I decided to do some basic sketches on how I'm intended the application to look. I first started with how the main interface will look like as I thought it would make it easier for me to lay features and remember to put the important features in order for the application to be used by the users effectively.
In my first draft, I've designed the main interface to be centred on the two type boxes where the words/sentences are translated while having the 'Speak' and 'Take a picture' options are put as smaller icons on the bottom of each box, indicating to the user for them to click in to change modes. Here, I've also thought of having the logo of the app on the top left (however, after actually doing it and evaluating the design, it looks a bit website-y and more appropriate for desktop; also I need to aim to only put the most important information on the screen as it's aimed to be used on mobile phones which have smaller screens in the first place; it shouldn't be distracting or confusing to the users. Here, I've also started to think about how the 'countries/languages' option can be opened. I thought of having it as a list that the users can scroll down through with the countries flags and in alphabetical order for quicker access.
Other design drafts also included a 'More Details' option, where the users can see the full details of the translation such as the context, use, when and how to use the word. I've thought of having this as a more details option as I thought maybe it would be too much information to be put if it was included in the main interface page. It will also include a 'Save' option in which the users can save their translations for later use so they don't have to translate it again.
In addition, I also started to sketch a rough idea of how the users will navigate through the application. Starting from the start-up page, the suers will be able to select a mode they want to use - type, speak, or take a picture, after selecting mode the users will be taken to the screen of the mode that they've chosen. Each mode will look very similar in order to have a consistent look throughout however, it will be made suited best to the mode that they users choose for an easier and less complicated user experience and user interface.
Type: This interface includes the two boxes for the users to type in, with the top box being their 'default language' and the bottom the translation box. The users can also 'swap' the languages and choose another language to translate to, in which a drop down list of all the countries will show up. Having a drop down list will make it easier for the users to scroll through and navigate to the language that they want to translate to as well. In addition, to these, along with the top box are small icons directing the users to particular navigations in the interface. Instead of going back to the start up page, the users can quickly switch modes by clicking the icons on the upper right corner of the top box. Similarly, on the bottom box the user can have the option to 'Save' the translations. If the users have saved a translation they can click on the saved option where the translations are separated in countries, keeping the information collected in order and for the user to remember what language the word/phrase and sentence have been translated into.
Speak: The users can use this mode by clicking the speak/speech icon on the left side of the box where the speech will pop up as they are talking. The rest of the navigation options are the same as the type mode.
Take a picture: When on this mode the users are automatically taken to the camera where they can take the picture quickly and the translation can then pop up after they have taken it. Similar to the previous two modes, the rest of the features on this mode are the same as the type and speak mode.
'More Details' - I also want to have a 'more details' option in my interface in order for the users to get more information on the translation that they made. As this is the main point of my design, I thought that if I was to include this on the screen where the initial translation is done, it wouldn't look as important and because of the size of the phone screen itself it would look really cramped on the page that it would just look really confusing and unattractive. It may also make the users feel like they are being overloaded by information so I've decided that it's probably best to have it in a separate page.
Thoughts & Reflections:
Overall, when I started to make these wireframes I was feeling great about it because in my head it actually made sense and it looked quite good and the user can navigate. However, after finishing them, I feel like they do make a good navigation experience however it looks too generic. As I've looked back at it again I feel like I've focused too much on the 'normal' features and the basic translation information that I didn't utilise my main points e.g. having the context, use of the translation so I didn't make a more innovative interface. I think I'll do this again, and create a design that's more centred towards the main point.
No comments:
Post a Comment