Usability Review: Marios.Tziortzis.com

Marios Tziortzis Personal Site (http://marios.tziortzis.com/) is used to promote his work, his photography, and to claim his space on the Internet. The clear navigation and traditional layout give the site a sense of familiarity — therefore making it more usable. It does it's job quite well, although a few minor tweaks would make it even better.

The purpose of Marios Tziortzis Personal Site (http://marios.tziortzis.com/) is to promote his work, his photography, and to claim his space on the Internet. The clear navigation and traditional layout give the site a sense of familiarity — therefore making it more usable.

Our Initial Impressions

Marios Tziortzis BannerThe banner for Marios Tziortzis website is well placed. So long as it’s mostly for personal use, the name is not a huge problem.
Matt says:

When I first open the page I see the sub header under Marios Tziortzis that says “thoughts, photos and whatnot”. This leads me to believe this is a personal website. As I scroll down I become aware the site looks very WordPress-esque and the two column layout is familiar to me.

Redd says:

My first impression of this site is that it is very artistic looking. I like the design and the colors very much. It seems well thought out and well put together. It is professional, while at the same time showing a lot of personality.

David says:

The first thing seen on marios.tziortzis.com is the banner proudly displaying Marios full name. This is generally the best practice for a website (displaying the name of the site in the top left of the page), but there is one problem in this instance. “Marios Tziortzis” is not a common, easy to remember (or say) name for me.

Andrew says:

I immediately notice the color scheme and the logo. The typography is crisp and the man standing nearby gives me a comfortable feel. I can tell this is a personal site. The subheading “Thoughts, photos, and whatnot” is inviting and succinct. The navigation is clear. I like the effect around the photos and the content area. It seems to provide the chromatic contrast necessary to differentiate the content but does not to call too much attention to itself.

What Confuses Us

Matt says:

I am wondering, what are these three photos along the top? I understand this is a personal site but are these blog post images that are going to lead me to a recent post? No, I am wrong. These photos lead to the Photography tab and show the image.

Redd says:

I’m also noticing that those three pictures at the top of the page are static and aren’t going anywhere. This is confusing, because although it does add some dynamic to the page, I think that if you aren’t putting your regular blog entries there either, then those pictures should be left off. It’s about consistency. They belong on the home page, but not on the other pages in my opinion. Also, the picture furthest to the right lines up with the sidebar, which makes it look part of the sidebar. I would recommend trying to differentiate this somehow.

David says:

I decide to view Marios work. If my intent is to someday hire Mario, this is probably where I’d look first. Unfortunately, this is a very difficult page to navigate. All of Marios selected works are shown on one page, vertically, with some links at the top of the page to navigate you to that kind of work (on the same page). For anyone interested in scrolling through a specific kind of work of Marios, they are going to have a very difficult time parsing the information on the page.

Andrew says:

What’s microblogging? I don’t know, but Mario places an entry that begins “Microblogging:” in the middle of his regular-blogging feed. The styling is different and this makes me wonder what the overall page structure is like. While the site layout was immediately familiar to me, I’ve begun to question my assumptions.

Anand Sharma uses a great 'diary' format in his personal blog
Anand Sharma uses a great ‘diary’ format in his personal blog.

At this, I would recommend taking a look at how others have tackled similar problems. Anand Sharma uses a great format on his personal blog, www.aprilzero.com to convey microblogging. On the right, he has a “Diary” section that lets users know what’s running through his head without elaborating. Mario may want to consider sectioning his micro-entries off like this.

What We Like

Matt says:

I like that underneath the photos on the Photography page I have a description to help me figure out what is going on. I also am really appreciating the fact that you highlight what page you are on via the navigation. Since there is not much of a color change on this website it helps me keep my barrings.

I really like the animation integrated in the RSS Subscription section, this draws my attention but isn’t too far from what one should expect to be when thinking of RSS. It certainly makes me want to subscribe just a bit more.

Redd says:

Marios has an About Me section, which makes me blissfully happy. It’s got a nice personal introduction, and a personal picture. There are nice links to where he went to school, his resume and so on. Also, he gives us information about his photography and his gear. I like that he has a lot of nice bold links throughout, which compliment what he is saying, but aren’t totally intrusive. He has one section, though, called “What I’m Listening” which does make me break out into hives a little. If you have to have that section, which isn’t entirely useful because it doesn’t give any real information about music types or bands, please make sure it’s changed to “What I’m Listening To”, and don’t forget the punctuation at the end of the description.

David says:

Comments are the traditional style which is great. They are nicely laid out on the page, use a form that is very typical of what you usually see on blogs, and even support gravatars. Marios comments are slightly different from other users making it easy to pick him out in discussion.

Andrew says:
The treatment of comments on Mario's site
The comments on Mario’s site are fun and unique.

I like the display of comments on Mario’s site. The comments by Mario are quickly differentiated from those of the blog’s readers. The wide spacing and the bits of color adorning each comment bring the life of the header back to the middle of the site. These subtle touches bring the page together. Sometimes it’s easy to feel overwhelmed by a sea of comments. This comment treatment makes me scan the page much more easily.

What We Suggest

Matt says:
  • Add a ’submit’ button to the search bar.
  • Add a back to top link on the Work page. This page is quite expansive and I wish I could return to the top easily after navigating through a few of these sections. The anchors to bring me to different sections of this page work nicely.
  • I would also suggest that you find consistency on whether or not your links are going to open in a new window. For example, your links on the Work page open in the same window while your contact page links to FaceBook, etc open in a new window. This confuses me as a user.

Redd says:
  • Do not make those top three pictures static. Keep them only on the homepage.
  • Fix the contact form so we have some kind of acknowledgement that information has been submitted.
  • Switch the picture on the About Me page to something more professional.
  • Do away with the “What I’m Listening” section, or fix the spelling and punctuation.
  • Make the archives font smaller.
  • Condense the comments on the About Me section.
  • Consider rethinking the Subscribe pull out option to something less subtle.

David says:
Site SearchThe Site Search
  • Consider using darker text in site search, and adding a search button to make it more obvious how to use the form.
  • The images at the top of the page don’t clearly tell me what they are for at first. It may be wise to label these images.
  • It should be more obvious that I can organize photos in the gallery by tags. Currently the link to categorize photos by tag is hidden in some page copy.
  • Currently, every page on the blog has 3 images taking up a bit of space at the top of the site. It might make more sense to just show these images on some pages and not others.
  • The title tag for the front page is a bit non-descriptive. It could be improved upon.
  • The pages are a bit large in size. This may or may not affect users depending on connection. If the audience is largely 56k users, it should be condensed. If it’s mostly high-speed users it probably doesn’t need much changing.

Andrew says:
  • The treatment of headers on Mario's site
    The headers on Mario’s site don’t explain the page’s structure as well as they could.

    Make the copy stand out better against the background, right now grey on grey makes things a bit difficult.

  • Place a “go” or “submit” button after the search field. Without having a permanent label/button a user may become lost after clicking in the field.
  • Consider differentiating your headers more, it’s hard to make sense of what header goes with what content sometimes.
  • Consider consolidating the methods of commenting on your work. From what I gather users can comment via wordpress, Flickr, and Google Friend Connect. I would try and stick with one or make the integration more seamless.

About the Author

UX Reviews

Related Articles

7 Comments

  • Marios Tziortzis Reply

    Thanks guys for the review. I appreciate your comments. There is always room for improvements and your comments definitely help! As soon as I find time after the holidays I will work on fixing the issues you mentioned. Keep up the good work and hope you have happy holidays.

  • David Leggett Reply

    @Marios Tziortzis: Thanks for letting us review your site. It shows how much you care about improving your users experience!

    Happy Holidays Marios!

  • David Hamill Reply

    I agree with Redd. Remove the images at the top from all but the homepage. Do the same with the ‘About the Author’ stuff on the right.

    I presume the main purpose of this site is for Marios to exercise his skills and for him to provide a point of reference for future employees. I think it does that quite well.

    I can’t help getting the feeling that the layout of the ‘Work’ page suffers from the fact that Marios has not defined a 2nd level menu. So all the work gets dumped in together with bookmark links.

    Marios has gone to town a little with the photograph tags. I think those tags would be a lot more useful if the list were a little more concise and available to click from the main photography page.

    A common mistake for photography websites is to lead with this 1,2,3 approach to the gallery. In order to find a lovely photo on page 10 I have to guess or click through the first 9 pages. The albums and tags are better approaches.

    I’d like the photography page to be a bit less cluttered. It does no justice to the beautiful photography. The photographs are a bit small and are drowned out by Ads and what not on the right.

  • Andrea G Reply

    Great review guys! They keep getting better and better and I think you finally figured out the best way to present reviews. :)

  • Andrew Maier Reply

    @David Hamill: Wow, really great feedback. You were really thorough! I agree with the photography website mistake: when I had a photo blog back in the day, I always worried what would happen if I had more than 100 photos. I don’t think the software I used planned for albums/galleries, but used categories. At any rate, a quick and decisive way of browsing your photos is essential for any online gallery, Marios’ included.

  • Marios Tziortzis Reply

    Wow, getting really nice feedback. Thanks everybody! I’m always open to suggestions as long as my style remains intact :P

    Just to be clear on some points:
    The top photos are the latest three photos that I uploaded on flickr. Those get updated much more often than the blog posts (1 new photo every 3-4 days). Thus the top section is regularly updated. I will update my design somehow so the user will understand what that section is about to avoid confusion.
    I agree that it gets annoying if the user’s interest is a particular blog post and instead the user keeps getting the latest three photos. I’ll fix that, as well as all the other little annoyances you all mentioned that I was kind of aware off but didn’t have time to ‘fix’.

    There is however an ‘album’ section as well as a ‘tags’ section. Maybe a bit ‘hidden’ but it is still there. I could promote it somehow on the sidebar when a user is viewing a photo.

    I know my ‘tags’ list is a bit huge but if you are looking something you can always use the search box (searches both blog posts and photos – tags and descriptions) – at least that was my initial thought.

    Just wanted to clear these up (:

    Please keep posting your thoughts and concerns.

  • David Hamill Reply

    Hi Marios,

    I’m not sure many people will use the search box to browse your photos. Your users will use the nearest available options rather than scanning around to find the most appropriate. This is likely to be the 1,2,3 links which do not promote much exploration. After a few pages many people will stop clicking through them.

    Most people will opt for the 1,2,3 because your design is telling them to do this. Your users will focus immediately on the photos and then scroll down a little to see them all. If you do this yourself you can see what happens to your links for the albums and the tags. They are gone.

    Many of your tags are relevant to just one photo. These are the ones I’d consider removing. If you find that this means that some photographs have no tags then keep the single tag that best describes the photo. A lot of the tags appear to be chosen because they are relevant to you. As a means of navigating this doesn’t help us users. We don’t know enough about you (or photography) to do so.

    Given the number of photos that you have hear, I’d maybe lead with the album approach to navigating. By lead I mean provide this as the default method of navigating them.

Leave a Comment on This Article