1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Can you help me decide which design is best?

Discussion in 'HTML & Website Design' started by mrforum, Nov 28, 2015.

  1. #1
    Hi friends, I have created two designs for a Job Portal website. Can you please vote for your favorite one at the following link?

    https://usabilityhub.com/do/c064ebf50b1e/6b3c
     
    mrforum, Nov 28, 2015 IP
  2. COBOLdinosaur

    COBOLdinosaur Active Member

    Messages:
    515
    Likes Received:
    123
    Best Answers:
    11
    Trophy Points:
    95
    #2
    I suggest if you really want an opinion, that you post links to the pages instead of spamming the site trying to entice people to participate in a survey or test or whatever you are running. we are here to help with problems, not to be test monkeys.
     
    COBOLdinosaur, Nov 29, 2015 IP
  3. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #3
    Well... I chose design number two, the one with the labels outside the form-elements, however, I chose that solely because the form seemed to more well-formed - actually, I preferred the other design-decisions in the other alternative, except for the form. My suggestion would be to go with design choice #1, the one with the small images next to the listings, and so on, but keep the form from alternative #2. If that made sense.
     
    PoPSiCLe, Nov 29, 2015 IP
  4. ulterios

    ulterios Well-Known Member

    Messages:
    388
    Likes Received:
    58
    Best Answers:
    1
    Trophy Points:
    140
    #4
    Both of these had elements that I liked, one over the other. However I picked the second one.

    I do think that some color and/or minor visual appeal addition needs to be added to the second one since it's a bit to plain and too much white.
     
    ulterios, Nov 29, 2015 IP
  5. mrforum

    mrforum Well-Known Member

    Messages:
    175
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    130
    #5
    Thank you very much for your feedbacks.

    I cannot identify it with numbers or left/right because the testing site places images randomly on left / right for each user, to avoid left right bias [​IMG]

    So it would be great if you identify the design as white background vs grey background.

    Can you please advise me what are the faults? What can be improved for a Job Portal website?

    I really appreciate your comments.

    Thanks
     
    mrforum, Nov 29, 2015 IP
  6. sarahk

    sarahk iTamer Staff

    Messages:
    28,487
    Likes Received:
    4,456
    Best Answers:
    123
    Trophy Points:
    665
    #6
    I got shown two that were white but one said "join our team of professionals" and the other "find your next career"
    I'm probably a bit literal, but the "join our team of professionals" sounds like the website themselves is hiring which isn't what you'd expect from a job portal
     
    sarahk, Nov 29, 2015 IP
  7. mrforum

    mrforum Well-Known Member

    Messages:
    175
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    130
    #7
    Well, please ignore the copy for now, you're correct!

    I just wanted to evaluate the design.
     
    mrforum, Nov 30, 2015 IP
  8. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #8
    You have two static pictures, not designs. It fails to provide enough to say if either is going to be worth a flying purple fish in terms of accessibility or usability... because again, dicking around in photoshop is NOT web design.

    Does the design sit atop a logical document order? How well does it gracefully degrade? Is it designed in crappy fixed metric (pixel) fonts or is it elastic? Are the forms complete and "well formed" with all the PROPER tags like label and fieldset?

    In either case the light grey text on white or dark grey on light grey areas look like they fall WAY short of accessibility minimums... though it's really hard to tell how much of that is jpeg artifacts and how much of it is the goofy picture. Some elements like the goofy "tabs" area with it's fixed height could be problematic or a long term maintennance headache, which is why stuff like that usually goes into the category of "has zero damned business on a website in the first place".

    BOTH have a ridiculoust amount of whitespace basically to try and cover up for a lack of content, pushing WAY too much meaningful stuff below the fold. I don't even want to THINK about what a disaster would result when it came time to make it responsive.

    But couldn't vote as you don't have designs, you have pictures of what MIGHT MAYBE be turned into a design... and I wouldn't since dicking around with that before you have semantic markup and working CSS layout is NOT the road to success.
     
    deathshadow, Nov 30, 2015 IP
  9. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,151
    Likes Received:
    1,656
    Best Answers:
    29
    Trophy Points:
    475
    #9
    qwikad.com, Nov 30, 2015 IP
  10. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #10
    Possibly because reviews sees very little visits from people who know what they are talking about? I usually only go there when someone points me at a specific post.

    Though in the case of those --- poster children for everything WRONG with web development today, in the typical "WCAG, what's that" way. Fixed metric fonts, fixed width layout, and utter / complete gibberish HTML. PARTICULARLY the <strong> doing h3's job and span doing P's job, gibberish H4 inside LI for christmas only knows what since those are not the start of subsections of the page -- it's so ignorant of what HTML is and how it works, I'd suggest throwing the entire mess in the trash, ACTUALLY LEARNING HTML, and starting over clean.
     
    deathshadow, Nov 30, 2015 IP
  11. mrforum

    mrforum Well-Known Member

    Messages:
    175
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    130
    #11
    Hi, thank you very much for your detailed review/comments.

    I wanted to get feedback from users before i implement the design, that's why i posted the two design images. Anyway i am in the process of implementing it, you can see it at http://www.webocado.com/srijobs/v2/

    It's still in progress, I didn't implement responsive views yet. So you just don't have to worry about the functionality or the markup for now, again, right now i just wanted to see feedback for the visual design / look n feel only.

    Thanks
     
    mrforum, Nov 30, 2015 IP
  12. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #12
    Which means your approach is BACKWARDS, and you are dicking around with appearance before you have ANY of the things that should be dictating the appearance -- logical document structure, content and the markup should be dictating the layout, NOT the other way around. You are missing ALL the things that should exist BEFORE you dick around with the appearance!

    If you've been screwing around with appearance in some goofy paint program like Photoshop before you have semantic markup, and screwing around with layout in photoshop instead of using CSS, it is HIGHLY unlikely the resultant site will EVER be worth a flying purple fish.

    Content > Markup > Layout in CSS, THEN mess with appearance and scripttardery. If paint programs get involved at ALL it should be as a paintover at the very end.

    No matter what the ignorant fools who call themselves "designers" whilst knowing **** about **** might claim. The very notion of screwing around with appearance before markup and layout are coded is so utterly and completely back-assward, only people who know jack **** about HTML, CSS and Accessibility could possibly even THINK it's a legitimate approach to development.

    The only reason that approach even exists is it's easier to dupe the stereotypical "suits with checkbooks" with something flashy than it is actual substance, since they too know jack about jack on the topic.

    I mean, if you don't have the proper markup from the start, how the **** are you even styling it or better question, WHY are you styling it when you'll have to throw that away when/if you fix the idiotic nonsensical gibberish you have for HTML right now?

    .... and what you have right now most certainly is gibberish; and that gibberish is part of why it's an inaccessible train wreck of how NOT to build a website. You don't have the foundation on which to even build an accessible responsive design, so why are you screwing with the design at this point?!?

    If you are dicking around trying to style this:

     <header class="main">
        <div class="wrapper clearfix">
          <a href="#" id="branding"><img src="images/logo.png" /></a>
          <ul id="nav-left">
            <li><a href="">Find jobs</a></li>
            <li><a href="">Resume</a></li>
            <li><a href="">Employers</a></li>
            <li><a href="">Resources</a></li>
          </ul>
          <ul id="nav-right">
            <li><a href="" class="up">sign up</a></li>
            <li><a href="" class="in">sign in</a></li>
          </ul>
        </div>
      </header>
    
      <div id="search" ng-controller="SearchController">
        <h1>Find your next career here</h1>
        <form class="clearfix">
          <div class="fields clearfix">
            <div class="field">
    Code (markup):
    You need to throw the ENTIRE mess in the trash and start over. Otherwise you'll never have a proper semi-fluid elastic responsive design that gracefully degrades properly, and instead have a bloated train wreck of inaccessibility.

    Of course, you've got that mouth-breathing "angular" nonsense pissing on the markup with it's made up fairy tale just BEGGING to break ng- attributes in there... *SIGH*
     
    Last edited: Dec 1, 2015
    deathshadow, Dec 1, 2015 IP
    COBOLdinosaur likes this.
  13. mrforum

    mrforum Well-Known Member

    Messages:
    175
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    130
    #13
    It seems like you make too many assumptions, I am not designing in photoshop and implementing in HTML, I don't know photoshop, I am a developer, I got the initial design from a designer and I am changing elements here and there in the markup to improve it.

    Again you're wondering how it can be made responsive, it shows your lack of knowledge about CSS, because you don't know how to have a perfect responsive view with the current markup, i have created many web sites in the past, first i create the page like this and then i add the css media queries at the end to make it look whatever way i want it to look on hand held devices.

    You have quoted some of my markup , what are you saying about it? You say the markup cannot be used for a fluid design? Well, believe it or not I am top rated front end developer in UpWork, I have developed many websites like this.

    The most important thing is whether the site is usable by the end users, whether it's easily accessible from hand held devices, the speed/performance, and the content. I don't think the users of this website (job seekers and employers) will be crazy enough to "Right click" and "View source code" to see if the markup looks good, rather if the user experience is good and they have useful content in the website, then that's what makes the success, not the markup.
     
    mrforum, Dec 1, 2015 IP
  14. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #14
    Well then that "designer" knows **** about **** and shouldn't be designing a blasted thing.

    Not saying you can't, I'm just saying it will be a broken inaccessible mess thanks to the garbage HTML.

    Not that it can't, but that it's an uphill battle thanks to too many div, little if anything remotely resembling semantics, gibberish use of numbered headings, gibberish/nonsensical document order. You've got clearfix asshattery like it's still 2003, vague/useless classes and ID's, PRESENTATIONAL Id's, pointless DIV in the form, no fieldsets, span doing label's job, content out of order, anchor inside a header doing H1's job, H4 on things that aren't headings, span doing tags with meaning's job... Like that example above -- what the hell makes the logo a content image? Why isn't THAT the h1 and what you have as a h1 be a H2 indicating it's a subsection of the site? What the hell are you wasting DIV and classes on in that form to do a fieldset's job for? Much less what in blazes do you need that DIV for when you could put the heading INSIDE the form and leverage that existing tag? Why is the subtext for each form placed AFTER the blasted inputs they are for?

    This: (omitting the massive commented out crap)

      <div id="search" ng-controller="SearchController">
        <h1>Find your next career here</h1>
        <form class="clearfix">
          <div class="fields clearfix">
            <div class="field">
              <span>Keywords</span>
              <input type="text" />
            </div>
            <div class="field">
              <span>Location</span>
              <input type="text" ng-click="togglee()" id="locationsearch" ng-model="location" />
            </div>
          </div>
          <input type="submit" value="Find jobs">
          <div class="locationlist fresh" ng-show="showLoc" ng-click="listClicked($event)">
                  <div class="col">
              <ul ng-repeat="d in locs">
                <li ng-repeat="i in getDist(d)">{{i}}</li>
              </ul>
            </div>
          </div>
        </form>
        <div class="bottom clearfix">
          <div class="col">
            <span>job title, keywords or company name</span>
          </div>
          <div class="col">
            <span>state or city</span>
          </div>
        </div>
      </div>
    Code (markup):
    Is ignorant gibberish HTML... particularly with the ingorant angular.js ng- fairy tale nonsense. (I'm even less of a fan of than than I am HTML 5's idiotic halfwit bullshit section, article, header, nav, etc, etc)

    It's a FORM, where are your fieldsets? Your LABELS? You know, the things that make websites navigable on non-visual UA's?

    	<form id="search">
    		<h2>Find your next career here</h2>
    		<fieldset class="keywords">
    			<label for="search_keywords">Keywords</label>
    			<input type="text" name="keywords" id="search_keywords">
    			<p>Job title, keywords or company name</p>
    		</fieldset>
    		<fieldset class="location">
    			<label for="search_location">Location</label>
    			<input type="text" name="location" id="search_location">
    			<p>State or City</p>
    		</fieldset>
    		<div class="submitsAndHiddens">
    			<input type="submit" value="Find jobs">
    		</div>
    	</form>
    Code (markup):
    Is a properly built and structured form... and if you think the HTML 5 strucutural rules will actually work (they usually don't, but test it) you can lose the DIV around the submit... and if your scripting was worth a damn it would hook by ID or parent instead of pissing on the markup with attributes that don't actually exist.

    Or take this ignorant nonsense:
          <a href="">
            <span>
              <strong>Sales manager corporate clients in London</strong>
              <span class="desc">
                Law360, published by Portfolio Media, Inc. and a LexisNexis company, is seeking a self-motivated, results-driven sales professional to manage our legal industry job board career center &amp; listings. This person will work closely with clients...
              </span>
              <span class="info">
                <span>Pay: $36k - $50k/year</span>
                <span>Full-time</span>
                <span class="loc">London</span>
                <span class="company">IBM Electronics</span>
              </span>
              <span class="time">1 hour ago</span>
            </span>
          </a>
    Code (markup):
    You're in 5, so theoretically you should be able to use block level tags inside that anchor... as such why are you using STRONG to do H3's, job, span.desc to do P's job, and span.info to do UL's job? Much less the broken APo of that 'time' class which should probably be inside the heading so you can let flow do it's blasted job...

    		<a href="#">
    			<h3>Sales manager corporate clients in London</h3>
    			<div>1 Hour Ago</div>
    			<p>
    				Law360, published by Portfolio Media, Inc. and a LexisNexis company, is seeking a self-motivated, results-driven sales professional to manage our legal industry job board career center &amp; listings. This person will work closely with clients...
    			</p>
    			<ul>
    				<li>Pay: $36k - $50k/year</li>
    				<li>Full-time</li>
    				<li class="loc">London</li>
    				<li class="company">IBM Electronics</li>
    			</ul>
    		</a>
    
    Code (markup):
    SEMANTIC markup -- ever heard of it? You've got a H2, the H3 say that each of these is a subsection of that...


    Which is why I'm wondering what the blazes you were thinking with these:
               <li>
                  <h4><a href="">Media</a></h4>
                </li>
                <li>
                  <h4><a href="">Sales</a></h4>
                </li>
                <li>
    Code (markup):
    What the hell makes those the start of subsections of the page? You just WANT search engines to slap you down for heading tag abuse and/or accusing you of stuffing?

    Remember, a H1 is the heading that EVERYTHING on the page is a subsection of, H2 means the start of a subsection of that H1, H3 means the start of a subsection of the h2, and so forth down the line.

    Kind of a laugh, you have H4 on things that aren't headings, and strong around things that should be H3.

    Much less do I even want to know what the mindset was for this asshattery?

        <h1>Looking for talents?</h1>
        <h1>Post jobs and find resumes</h1>
    Code (markup):
    You know what you said about my knowledge of CSS? I say that about your knowledge of both HTML and CSS; you don't know enough about either to be writing a single blasted line of them!

    Hence your ridiculous 18k of markup (once the 12k of commented out stuff is removed) for 3k of plaintext and nothign resembling content, roughly TWICE the markup as should be present for such a simple layout -- much less you barely even have styling or responsive and are up to 11k of CSS? :/

    Could be worse though, you could be one of those dipshits who would have twice that markup in presentational classes and start out with 100k of CSS thanks to some dumbass "framework" bullshit like bootcrap.

    It's a laugh as you even hard coded the columns as separate UL when they're alphabetical order across; again, let flow do it's blasted job instead of writing presentational markup!

    That I'd sooner suck on the end of a high velocity lead dispenser than deploy something with this many separate scripts, particularly mixing the mouth-breathing dumbass code blot asshat bullshit known as jQuery with the equally stupid nonsense of Angular.

      <script src="js/lib/angular/angular.min.js"></script>
      <script src="js/lib/angular/angular-sanitize.min.js"></script>
      <script src="js/lib/jquery-1.11.3.min.js"></script>
      <script src="js/controllers.js"></script>
      <script src="js/directives.js"></script>
      <script src="js/filters.js"></script>
      <script src="js/services.js"></script>
      <script src="js/app.js"></script>
    Code (markup):
    YMMV.

    Not having ever even heard of "upWork" that doesn't mean much to me... *GOOGLES IT* Ah, Elance-desk changed their name. Another of the whorehouses of alleged "talent" mostly made up of sleazy scam artists not qualified to do a single thing they claim.

    I consider such sites to have about as much legitimacy as "make money fast in Realty" ads from 3AM TV infomercials, and pity the fools dumb enough to think anyone there is in fact legitimate.

    So again, YMMV.

    Given your markup and the layout concepts, it's strange to hear you say that as you're doing the exact opposite, since there's more to ACTUAL web design than what it happens to look like on the screen your seated in front of. Non-signed users, graceful degradation for lesser devices, images disabled with CSS still enabled degradation, CSS reduction via semantics...

    Even setting aside the underlying disaster, you have illegible grey on grey, fixed metric fonts, fixed size elememnts that are unlikely to adjust well to changing content moving forward, and little if any plan for graceful degradation as you're dicking around with the appearance without proper semantic markup and a progressive enhancement plan.

    Which means asking "grey or white background" the only significant difference between the two you were presenting is pointless.

    All that said, it's very much what I've come to expect people to have deluded themselves into thinking is website building... in the traditional "semantic markup, what's that?" and "WCAG, what's that?" kind of way.
     
    deathshadow, Dec 1, 2015 IP
  15. COBOLdinosaur

    COBOLdinosaur Active Member

    Messages:
    515
    Likes Received:
    123
    Best Answers:
    11
    Trophy Points:
    95
    #15
    Backward is backward; no matter how you try to spin it. The visual presentation is at the bottom of the list when it comes to what is important on any web page. When you start from design instead of content you end up crapping all over the content to make it fit the design which is just about the most obtuse thing you can do to a web site.
     
    COBOLdinosaur, Dec 2, 2015 IP
  16. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #16
    correction, past edit time limit:
    Should say "non-sighted"
     
    deathshadow, Dec 2, 2015 IP
  17. mrforum

    mrforum Well-Known Member

    Messages:
    175
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    130
    #17
    Just wondering how you noted it after some time? you have the habit of going through your own posts time to time?
     
    mrforum, Dec 2, 2015 IP
  18. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #18
    Noticed it when reading CB's post. Just kinda stood out for some reason... but then I can speed read a Michener novel in about twenty minutes -- part of why I have zero use for the TLDR mouth-breathers.
     
    deathshadow, Dec 3, 2015 IP