2

I am looking for a way to implement a "shopping cart" like functionality while balancing "user experience" and software quality.

In my case I have a classroom with students and need to handle the following list of functionalities:

  1. add/remove students to/from class
  2. manage students' scores

I was told to implement modal with AJAX, but I would rather keep use of JS to minimum and implement things on the server. I came up with two simplified mock-ups and analyzed pros and cons.

Mock-up with AJAX:

enter image description here

Mock-up without AJAX:

enter image description here

Pros and cons of each

With AJAX:

  • Pros
    1. "Modern" look and feel
    2. End user may like the fact that they can complete all the work from one page, without having to jump from page to page
  • Cons
    1. Too many functionalities on one page (update scores, filter table, arr/remove students)
    2. Too much JS (I would rather write code in object oriented language with strong typing)

Without AJAX:

  • Pros
    1. Single page - single responsibility
    2. No JS (all code is in one place, better debugging, easier to read code and to maintain, etc)
  • Cons
    1. I would have to pre-load ~10000+ records into the table, which can be time consuming
    2. Not so "responsive"; have to jump from page to page rather then finish doing everything on a single page

Questions

  • What would be "the industry standard" to go about it?
  • How to go about taking advantage of both?

Edit:

I felt the need to specify that this is somewhat "internal" application. It is not going to be open to "general public". There will be maybe under a ~100 (or a few hundred) people who will use this application. In addition, there probably will be just 2 people at most working on this application. We don't have resources Facebook or Google has to build heavy one page web apps. We are not even allowed to use frameworks like angular. I would use jQuery's AJAX.

  • 1
    Hi Alex, welcome to UX.SE. I'm not sure how are you relating AJAX to look, but for what I understand from your mockup, you can use any of the screens indistinctly of whether you use AJAX or not. Anyways, there's no "industry standard" per se, it's all about user testing. But if I had to go with one based on most common scenarios, the "industry standard" would be AJAX, without a shadow of a doubt – Devin Sep 10 '18 at 17:50
  • @Devin I updated question to farther describe the situation. I just want to deliver good quality, reliable, stable software, but AJAX complicates things up for me. (PS: don't stress about "being nice" to me). – whatever Sep 10 '18 at 18:02
  • you can use ajax to swap out chunks of server-rendered HTML, leaving little client-side application logic to maintain, but allowing partial page refreshes' ux benefits – dandavis Sep 10 '18 at 19:32
  • 1
    I would say that the AJAX Solution wins it for me - the rest of the page can be obscured to help the user focus, the workflow is simpler, and loading 10000+ records up front doesn't sound great for someone who just wants to add/remove one or two pupils (which is a guess at what the majority of use-cases will be). I'm not putting this as an answer because it's just opinion. – Andrew Martin Sep 11 '18 at 7:48
2

Short answer: You can skip the javascript by using a menu of buttons for each task and an iframe (for the form associated with the currently selected task). To the user, they will believe they are staying on the same page, while the code functionality can be done with html and a backend language.


A little context: Generally speaking, the best designs will come without technical considerations... meaning, you first analyze your goals and have a very good understanding of people and behavior, then you create an interface that reaches the goals in the most intuitive way (aka least effort for the user).
In practice, it is usually unwise to COMPLETELY ignore technical constraints. Ignoring what it takes for someone to build the interface can cause many issues from wasted time, to never completing the project.

It sounds like you have a fair handle on what I mentioned above, I just wanted to make that clear before proceeding to an answer (in addition to providing some context for my answer).

As you mentioned in your question, traditionally this would be done with ajax. It seems you have a preference towards not using javascript as much which is fine because in my opinion, it is adding very little. As a note, if you feel like it would be beneficial for you to use this as a sample project to practice javascript then go for it. If you don't have much interest, then skip the learning for the sake of task completion.

Suggestion: Based on my assessment of your preferences and constraints (which I may not be understanding fully), I would recommend making an html page with an iframe. The html page with essentially be a menu bar (which you could position across the top of the page or along the left side). Then with the remaning space on the page, you can have an iframe which you will set based on which menu link the user clicks:

<a href="modifystudents.php" target="iframe">Modify Students</a>
<a href="submitscores.php" target="iframe">Submit Scores</a> 

This structure will keep your business logic contained in your backend pages (modifystudents.php etc). The menu structure will keep the user focused on one task at a time and is a pattern that many people are used to. This approach will also feel as though the user is only on one page (since only the iframe will be changing) while allowing you to keep your code maintained in multiple clear files.

  • +1 for pointing out to first design for the user and then think about how to implement it, not the other way around. The latter is a limiting thinking. – Big_Chair Sep 13 '18 at 9:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.