ZoomConcept Reviews
Positive Feature I love clean, straightforward, no frills feel of it. Summary:
I am trying my best to nitpick here:
- not biggest fan of the logo reflection. It feels dated to me (might be personal). The design is clean and straightforward and that reflection throws it off a bit. Logo by itself has enough interest and reflection does not add anything. I would be curious to see how it looks without it and with logo sitting a bit higher (about 5px);
- The tagline (SKILLS AND JOBS RETENTION GROUP) feels somehow detached rather than part of design. I would try aligning it with something: a) flashed with the right edge of login button b) moved in the top area and aligned it with the logo baseline c) located below the logo and a bit smaller. Sorry if you already tried all of the above
- I'd flash align footer with the rest;
- I prefer a little bit tighter kerning in logo text;
- An interaction and technical issue: the error message appears in top left corner and pushes the rest of the design down. The error message is the best when located at the point of error - below or next to input boxes. It would be also nice to throw a highlight around the input box responsible for the error;
- In the form on the personal registration page I would move labels a little bit closer to input boxes to crete better visual relation between both. If you tighten up the space in-between boxes and corresponding labels it'll also create more space between input groups and will help visual grouping. I know that Luke Wroblewski ( web forms guru ) recommends bolding labels when placing them above input boxes. In your case I am not convinced it's needed since you capitalize them but you might want to try;
- On the second mockup with 2 cards (not sure what are those) i'd play more with fonts. Like in the bulleted list I'd tighten up leading between two lines that belong to one bullet, to make better visual separation;
- In the rectangular dark blue buttons I would add more spacing to the left and right of the text inside the button. It feels too tight;
- The text inside those two boxes on the second mock: somehow the positioning of it feels not quite right...not sure what it is....maybe moving it to the right? so the amount of space between the text and blue triangle equals the amount of space from the end of the word business to the right edge of the triangle. Does it make sense?
You are already in a good place with design. For 5 days worth of design+ built it's a perfection.
Positive Feature Design
Straight forward and simple, as every log-in form should beNew Idea Logo Reflection
Move the logo down (or blue up) so the reflection doesn't occur on the line. Then separate the reflection by moving a few pixels away from the logo. Right now it looks as the reflection is mashed on top.Summary:
I'm okay with the logo and reflection, but it's off a little. Right now, the line disconnects the two. You'll get more of a depth feel and look by moving both into the blue more.
I don't like the Forgotten Password link by the check box for usability concerns. The "remember me" location is fine where it is but maybe group the new user and forgotten password together (but don't use all caps if you do that)
Nice work for short turnaround time!
-
Emma Simpson commented:I specifically was asked to separate them. I originally had remember me by itself on the right and new user/forgotten password together. The client wanted me to move forgotten password down and away from the new user login but I felt you'd have three very separate elements and it wouldn't hold together so well. My compromise was this to put Forgotten password and remember me together on the right.
Thanks for your input :)
-
Dave Demuth commented:Yep, that makes sense. Again, nice work!
-
Minor Problem on Picture 10.png 1 If this is all what will be displayed on this page...it looks empty 2 logo - align left headline - align right footer - align left I dont see point of this placement. To check headline i need to go with my eyes from left to right and then go back..week flow -
Emma Simpson commented:
I did try a number of positions for this and am expecting a tagline which is longer than this. It's to do with balance across the width of the screen - have made this whole width narrower now to work on lower resolution monitors so it may tie together better
3 This should be in header Minor Problem on Picture 11.png 1 Here you put button with align right. On registration form we have buttons with align left - little inconsistency (i know this is not a form, but still :) -
Emma Simpson commented:
The login is a separate element and is consistent with the large simple search inside the site. All other buttons align left throughout the site for consistency but where you have large simple login or large simple search, the button is to the right. It makes sense in terms of usability and also looks cleaner and neater.
Minor Problem on Picture 13.png 1 Sooo empty. This is becouse form have bg. Why not make fields with this color bg, ald leave rest white? -
Emma Simpson commented:
We may move personal details up into this space. It was thrown together very quickly and this is something we will look at.
Lower down the form, you need this space as when you click on a check box, it all slides out for the sub categories and slides out again for sub categories of that to match the search on the inside of the site. It's functionality they specifically asked for
-
Jakub RóG commented:I still think, that this one tree-like category matter, is making whole form to be whider than it should. In some parts it doesnt look good. Also I strongly suggest to make some registration steps, or use accordion form. Form is very long... Also, i noticed you're using two different validation display, in one registration, there are tooltips to each field, in other, i see list of errors grouped together. This have some point ? (i'm asking, becouse i see there's a lot of business goals involved in design process) Also...Register button should be better visible than Cancel button , it has more value
Serious Problem on Picture 10.png 1 You are using common technique for this procedure. So you put link to "forgot password form" but when user clicks it, it says about email. So what, i should put an email, leave password empty and click this "forgot password" link? Look how bad it sounds. If you want to work this way , forgot password should be same button as Log in, placed on right to login button. If you showing this as a link, it should redirect to fotgot password form It should be different form in general :) I like the idea of 2 forms in one, but as i wrote, in this case we should have 2 buttons - login and "remind me a password" for example. 2 Missing header like "Login page" or sth -
Emma Simpson commented:
thanks - will look at this
Positive Feature on Picture 12.png 1 This looks nice, clean and simple New Idea on Picture 10.png 1 Change color of this register button. Some people may want to register when they enter to this site. (i dont know you strategy ...so im assuming), and now they need to search for it. 2 This is place for this login form. I dont see point to waist whole page only for this form... New Idea on Picture 11.png 1 Why not put those two boxes, with login form ? You have space, they are connected...for me now its a waist of space to put everything on separate pages -
Emma Simpson commented:
It's to do with simplicity and focus. On the login page, the focus is to login and nothing else. If I start cluttering the page up with business registration and personal registration, it's making it so people have to deal with more information than is necessary. Look at apple's approach to their e-mail login. They do the same thing as I've done here with a very clear simple page for logging in and small words if you're a new user who wants to register for the first time.
-
Jakub RóG commented:
Ok , i see the point, thx for explaining
Summary:
Login, Registration is something which should be easy. Many times i see / create this on one page even, to speed up proces. Here we have 3 different views, different forms, buttons in different places, important links that are not visible (registration) or links that dont work as they should (forgot password). In general this should be supersimple, its not :)
Check notes - dont have much time, so i only work on login form
Also im missing whole navigation to other parts /places/pages but i dont know if they are necessary or not:)
-
Emma Simpson commented:
Thanks or your review.
the navigation only appears on the interior of the site - this is just the login and registration part of the site so no navigation as not necessary - may get rid of header on the registration forms too so this is clearer
-
Emma Simpson commented:
the forms for personal registration or business registration are long complicated forms. I don't have control over what information is asked for in these forms but they are too much for one page. The registration link is visible on the login page and on the business/personal registration form on anything other than 800x600 and I need to fix it for that size. The registration button shouldn't be visible on the long forms as you have to fill in the form first before hitting it. If it's at the top of the form, you'd have to scroll to the top once the form is filled in to register and that's bonkers in terms of usability
-
Jakub RóG commented:
I dont recall to suggest, to put registration link at top of the form ;) I just pointed out, that Register text could be different colour on login page. I read your comment after adding mine, so you'll read that i also noticed to long registration form, i see each part have headlines, so accordion is what i would use here (apple way btw;)
-
Jakub RóG commented:
One more thing, I clicked Find address, and now i see 3 different buttons, Log in which is square, Find address /Register/Cancel are round, and in overlay i see even more rounded
Another thing are fonts in form, to much different sizes/widths /bolds /greys etc. Labels for me shouldnt be so different , there are already a lot of fields, it isnt easy and simple process to register, for sure :)
-
Emma Simpson commented:
Thank you for doing such a thorough investigative review. I really appreciate your time and effort.
Good call on the Find Address dialogue box - you found something I haven't even started to style to bring it in line with the other elements.
I'm confused by your fonts in the form comment - there is one font and two sizes/weights - one size is in one colour for the labels and the larger is paler because they're the heads but I don't want them to fight too much with the labels themselves which are all same size, same weight, same colour. If there is any other text then it's in paragraph style - I wouldn't want to put running copy into the same styling as the labels and I wouldn't want to put running copy into the same style as a headline which is the only possible solution I could do to lessen the styles/weights.
I misunderstood you when you said not visible, I thought you mean it's not visible within the browser window. Will look at changing the colour on the register button when the rest of the site is finished.
The problem you raise of the form being so long is a good one and we have discussed making the form more like a wizard sign up process with progress bar etc to make it easier and more simple. This is something we will return to when the rest of the site is done.
Thanks again :)
-
Emma Simpson commented:
The fonts in the form could be a browser issue - still need to check most things cross browser. Amazingly the site has to work in IE6 as a priority so that's the browser we're fixing for first and obviously it's a total nightmare - the site is a lot bigger inside - these areas are only small parts of a v complicated whole. Can't wait to get it all finished.
-
Summary:
-
Emma Simpson commented:
I saw your comment to the review I gave to your concept which has now been removed saying you posted this and your four other empty reviews by mistake.
Yes it is possible that you put up the reviews by mistake but there is an edit button and you can see the review is empty as soon as you post it so you could go in and edit it afterwards.
If you made a genuine mistake then I am sorry but there are many people who try to post empty reviews just to put a concept up so it is understandable that we all jump to conclusions.
-
Summary:
For a fast turn around, branding + web design + development, this is very good. The square dot matrix used as the header background is a good solution for this project.
Separating the tagline from the logo causes them to loose the synergy which can be developed by keeping them together.
The "TR" in the logo works really well. I think that "Retention Solution" should be the same weight as "Talent." The color change provides adequate contrast without introducing the additional element of changing the typeface weight. Not only does this de-emphasize "Retention Solution" but also makes the logo feel more busy. It seems to me that "Retention" is as important to the company's name as "Talent" and should not be de-emphasized.
On a design of this simplicity, I think that the logo's reflection adds some needed detail and depth to the page, so I definitely think it should stay.
Summary:
El slogan/tagline se ve un poco desconectado del logo y eso dispersa un poco el diseño.
Trata de no usar todos los textos en mayúsculas, es un poco cansado para leer. Por ejemplo, podrías usar los textos "NEW USER? REGISTER HERE" and "FORGOTTEN PASSWORD?" en minúsculas, para lograr un poco de contraste y a la vez diferenciar que son links. Tal vez, usaría una mínima diferencia de color para esos dos elementos.
En el layout del formuario de registro, el único cambio que haría sería darle color azul a los títulos de cada sección del formulario ("Your Account Details", "Your Business and Contact Details"). El mismo azul que usas en los títulos de "Terms & Conditions". O símplemente dejarlos en gris pero agrandar un poquito la tipografía, tal vez dos puntos.
Respecto a los comentarios sobre la consistencia del diseño de los botones, yo diría que nos veo un gran problea, ya que estás asignando diferentes funciones a los diferentes diseños de botones: los botones azules y con puntas cuadradas abren nueva información al usuario y los botones grises y de puntas redondeadas solo envían información del usuario al sistema. Es una forma de generar contraste también.
Summary:
it would be better if you dragged the content to the middle because you have that big blue empty space
Thanks so much for your well thought out and considered review.
The reflection I'm going to look at.
The tagline I was expecting to change so was waiting for the actual wording before deciding it's final position but yes have tried it in several places and it either threw off the balance of everything else when on the left so I put it on the right to try to balance but then as you say it looks a bit detached.
The error messages I'm hoping to put into tool tips - these were left over from the old site design and something I hadn't got round to sorting out. It had to go live a few weeks ago and it was a case of choosing the elements which were most crucial to the design and functionality and now doing the rest once the site was live - terrible way to work but sometimes deadlines are immovable and we didn't get the brief until as I said two weeks before it had to go live.
Am going to spend a day doing some tweaks across the site tomorrow. There are all the internal pages too which I had to do and still need work. It's v much a job where compromises have had to be made but hopefully now I can have a bit of time to polish it and bring it all up to standard.
Thanks again for your input - it's so good to get extra skillful eyes on it :)