Go directly to a Ḥadīth using its Reference Number

As-salāmu alaykum wa-raḥmatullāhi wa-barakātuh. Jazākumullāhu khayrā for your wonderful work on sunnah.com. This website is extremely useful to me and I benefit from it on a daily basis.

I would like to suggest another extremely important feature that is necessary for a Ḥadīth reference website like yours, and it would be very easy to implement, in-shā-Allāh: the ability to go directly to a Ḥadīth using its reference number.

For example, today I wanted to verify whether Bukhārī Ḥadīth 2998 had the same content as was shared with me on social media. So I had to first open up Bukhārī on your website, then browse down the list of books in Bukhārī and select the book in which Ḥadīth 2998 lay, then on the book's page, I had to scroll down hundreds of Aḥādīth to Ḥadīth number 2998. These are too many steps required for opening a Ḥadīth by its number. We can improve your website's UX Design by automating all of this manual lookup, allowing the user to achieve it in a single step, using the following two methods:

Firstly, by adding on sunnah.com Home page a "Ḥadīth-book" selector drop-down menu and a "Go to Ḥadīth by number" text field. A person would be able to select Bukhārī from the book drop-down menu and enter 2998 in the text field and would be taken directly to Ḥadīth 2998 in Bukhārī in a single step.

Secondly, in quran.com you have an excellent feature of going directly to a particular verse. For example, if someone wants to see verse 255 of Surah 2 (Al-Baqarah), they can directly type the URL quran.com/2/255. This is an extremely useful, intuitive, one-step method for going directly to the required verse. Sunnah.com also has this type of URL feature, but the numbering doesn't use the common Ḥadīth reference numbers. For example, Ḥadīth 2998 in Bukhārī has URL sunnah.com/bukhari/56/207. A person would most likely be searching for Ḥadīth number 2998 (for this is the most common reference number shared in books and on the internet) in Bukhārī instead of Ḥadīth 207 within Book 56 of Bukhārī.

I'm not saying that this current URL numbering scheme should be changed—on the contrary, this should remain as it is because people may have been hyperlinking your URLs in other documents and websites, so we cannot break all those links. However, you should also establish a second URL scheme that uses the more commonly used numbering. For example, you can use sunnah.com/bukhari/h/2998. The /h/ in the URL would stand for "Ḥadīth". The URL can thus be read as: "go to Bukhārī Ḥadīth 2998". This means that both sunnah.com/bukhari/56/207 and sunnah.com/bukhari/h/2998 would lead to the same page content displaying Ḥadīth 2998 of Bukhārī.

How will your server distinguish whether the user intended to enter the first type Of URL or the 2nd type? You can determine this by looking at the first argument, whether it's "h" or a number. If sunnah.com/bukhari/h/X is entered, then you take X as the overall Ḥadīth number in Bukhārī. If sunnah.com/bukhari/X/Y is entered, you take X as book number and Y as Ḥadīth number within book X.

And this 2-way URL numbering formula should be consistently applied to all Ḥadīth books on sunnah.com, so that people can habitually use it for quick reference in all books.

This URL scheme should also work for Sahīh Muslim, which has Ḥadīth numbering containing alphabets, such as 224a, 224b, etc. So if someone enters sunnah.com/muslim/h/224b, they should be taken to the 3rd Ḥadīth in Book 2 of Muslim (sunnah.com/muslim/2/3).

Also, please do not redirect sunnah.com/bukhari/h/2998 to sunnah.com/bukhari/56/207. Instead, show Ḥadīth 2998 content on sunnah.com/bukhari/h/2998 URL itself. This will allow the user to intuitively develop the sense that they can utilize Ḥadīth number inside the URL to go to a Ḥadīth directly. The next and previous Ḥadīth links on the Ḥadīth page should also have the same URL numbering scheme as is present in the browser's address bar. So if /h/ scheme is used to get at a Ḥadīth, the next and previous Ḥadīth links should also be filled with /h/ URLs. If /book/hadith scheme is used to open up a Ḥadīth, the next and previous Ḥadīth links should also have the /book/hadith URLs. This is so that the numbers in the URL change consistently when the user presses the next or previous Ḥadīth buttons, allowing the user to develop an intuitive sense of both types of URL numbering schemes, so that he can use them according to his needs.

Jazākumullāhu khayrā for your most excellent service to the Muslim Ummah, and I'm looking forward to using and benefitting from these valuable additions to sunnah.com.

Sincerely, Muhammad Naushervan, Software Engineer & Web Developer, Islamabad, Pakistan

If you guys (main developers) are busy with other tasks, maybe I can take out the time and implement the above two functionalities. Or one functionality, whatever you permit me.

If that is the case, please assign this task to me, and I will try to do my best and send you a Pull Request.

Also, kindly share any important instructions I may need with regards to coding and making the Pull Request, as this would be my first time working on your project.

Looking forward to your reply. Thanks.

Wa Alaikumussalaam brother,

JazakAllah for your deep analysis of the problem and well thought out solutions.

This permalink problem had been on our minds for some time as well. A solution was already deployed by the time you opened the issue. We have not finalized it entirely and it is not being promoted yet. There are still some things we're finalizing on this problem and I'd love your thoughts on it.

Please view: #58

Regarding your first suggestion about a drop down and a text-field to jump to hadith by reference number, I'd like @ahadith's thoughts on it. I'm wondering if consistent use of the new permalink structure makes it redundant. The pattern is immediately recognizable and would work pretty much the same way a text field would. Perhaps we could add a text field on the collection page only? User would actually have to do less work to jump to a hadith by reference this way.

Even without a text field now, you may click on a collection name and add the reference number to the permalink to jump to the hadith. Perhaps a text field would serve non-tech savvy users who might be afraid to mess around with permalinks. The question is, how many users would actually benefit from it? We expect most frequent users to learn the colon trick in time.

I'm wondering if consistent use of the new permalink structure makes it redundant. The pattern is immediately recognizable and would work pretty much the same way a text field would.

You are right, I would personally only use the permalink because I wouldn't want the extra step of first opening up the Home page and then using the text field to go to the Ḥadīth. I would only need either of these two options (permalink or text field), and I would prefer the permalink option as that is one less step for me to do as a user. Programmers like us would be fine with your permalink structure alone.

However, a non-tech savvy user is likely to benefit from such a text field on the Home page. I suggested this idea for the average user who is generally not going to bother looking at and tinkering with URLs, and is most likely to search inside the User Interface to find a way to get to their Ḥadīth of interest. So I think that such a "Go to Ḥadīth directly" drop-down menu + text field put directly beneath the current Search text field on the Home page will likely benefit MOST of the people who would like to jump to a Ḥadīth directly. This is the method that will be most easily and intuitively understandable to the maximum number of people. So this will improve your website's User Experience (UX).

ALTERNATIVELY, if you don't want to clutter your Home page with another group of input fields, you can allow people to type book-name:hadith-number (for example, bukhari:2998) in the currently available Search field on the Home page. In this way, we will repurpose the current field and get both functionalities out of it, without having to add another field (if that is your concern). And you will DEFINITELY need to explain this special method of searching (along with book codes) in the "Search Tips" (the link below the Search field)—otherwise, NO ONE will know about it in order to use and benefit from it. I would suggest you add it as the very first tip right at the top due to its importance. And this functionality should work on all Search boxes on your site, not just the one on the Home Page.

With regard to improving this alternative solution, I would suggest that on the right side of the current Home Page Search field, you should display each of the Search Tips as text in a revolving fashion (similar to the validation labels or example labels used in most input forms online to guide users about the format of text entry). So you can display each Search Tips for 5 seconds, fade it out, fade in the next tip, and keep on revolving all of the tips. That quickly shows users all that they can accomplish from the Search field. This is needed because the "Search Tip" button below the field is not very obvious—I myself never noticed nor bothered to click it for years. In this revolving tips label, the bukhari:2998 search tip should display right at the beginning because that would be the most frequently used methodology of search once you provide that. You should mention all the book-codes (bukhari, muslim, tirmidhi, etc.) in this single revolving tip as well, along with one example usage, to make it easier and quicker for the layman to understand how to use it. You may also use a lighter font color so that the tip is not in your face (has a little less visibility compared to other items on the page).

In summary, I think that you should provide at least some method from within the UI to jump directly to a Ḥadīth because that is what most people would be looking towards to achieve their goals. That would be an improvement in the User Experience (UX) of your website. Adding a new drop-down menu and text field on the Home page is more intuitive and easier to understand for most people, while the alternative method of repurposing the current Search box is relatively less obvious to the layman, but it's cleaner as we don't have to add new elements on the Home page. We can make it more obvious by adding a revolving tool-tip at the right side.

These are just some of my suggestions as an experienced user of your website for the benefit of the public. You can decide what method is best for your website.

We expect most frequent users to learn the colon trick in time.

I have been using your website for years on a regular basis, and I have been wishing to have a permalink solution for a long time, and I did not even know that a permalink solution already existed. I used to try it out by typing the URL with a slash and not a colon, because a slash is more intuitive and common in URLs (colons are extremely rare). I don't think people are going to accidentally stumble upon the colon trick in time, unless you guide people to it. For people to benefit from it, it must be explained somewhere. I would suggest adding a User's Guide page linked in the footer that also lists all the book-codes (bukhari, muslim, tirmidhi, etc.) a user can apply in the permalink.

Nevertheless, I think that the permalink colon syntax you have devised is better than the /h/ syntax that I suggested in my first comment in this thread, mā-shāʾAllah, bārakAllāh! Colon syntax is the optimal way to go if we want to accommodate the other /book-number/hadith-number syntax.

Wa`alaykum ussalam warahmatullah Muhammad

Jazakallahu khair for your thoughtful post and apologies for not getting back sooner. We are very happy you find the website useful alhamdulillah.

As @fsid mentioned above, we had already implemented the feature alhamdulillah but were at a crossroads about how to popularize it and whether or not to make the links canonical. The feature is actually non-trivial to implement because of edge cases and so forth, but we saw the same need and did it alhamdulillah.

As for adding a text box - I would be OK with a small unobtrusive "Jump to hadith: " type of box. It would have to be skillfully designed though so as not to add clutter. I do like the second suggestion better though - the search box, and then an example below the search box on the main page in small text that says "e.g. bukhari:4046".

Finally, we are always looking for talented developers to volunteer with us and help us add features to the website. If you think you might be able to spare some time and help on other issues we would love to have you on board.

Wassalam

@ahadith Thank you so much for your gracious offer. It would literally be a dream come true for me to be able to contribute for the sake of Allāh Almighty to one of my most beloved projects from which I have personally benefitted a lot. If you would be most kind to assign me any task (along with relevant instructions), I would be honored to do it.

@ahadith @fsid I recently had an epiphany, by the Will of Allāh: an idea that combines both of my previous ideas above into a very nice solution that attains the pros of both along with additional benefits.

To recap: The issue is that, for the benefit of the non-tech-savvy user, we want to be able to provide the functionality of jumping directly to a Ḥadīth using its primary reference number from the Home page of sunnah.com in one step (rather than open a Ḥadīth book, let the page load, then scroll down to the sub-book and open it, wait for the page to load, then scroll down past hundreds of Aḥādīth to the relevant Ḥadīth). I shared a couple of solutions to this in my comments above, both of them had some pros and cons. The following solution is better as it has the pros of both along with additional benefits (without the cons, as much as I can see, alḥamdulillah).

The idea is that rather than adding a 3-element row below the Search field (i.e., a Book-list drop-down menu, a Ḥadīth-number text field, and a 'Go' button) below the Search field in order to directly jump to a Ḥadīth of a specific book, we can just add a Book-list drop-down menu on the left side of the already available Search field (please see the screenshot below).

Screenshot 2020-10-02 191656

By doing this, we will achieve the following benefits:

This arrangement will not add any more rows of elements to the Home page, so the page will remain simple and uncluttered as before. The UI is being updated minimally and inconspicuously.
By default, the "All Books" option will be selected in the drop-down menu when a user browses to the Home page. This means that the Search operation will make a text search within all of the Ḥadīth books. This the exact same Search functionality that occurs right now. So the current Search functionality is available and applied by default.
If the user selects a specific Ḥadīth book from the drop-down menu, then we will limit the keyword search within only that Ḥadīth book. This functionality is currently not available on your website at all. I can say from experience of using your website that this is an extremely valuable functionality that is currently missing from your website. This is because sometimes I get pages of results from some common keywords. But I may prefer to just see results from Bukhārī, perhaps, and results from so many other books are only creating unneeded clutter. Or sometimes a person just wants to verify whether a Ḥadīth containing some keyword lies inside Tirmidhī or not, they are not interested in results from so many books. Or sometimes a person knows that a Ḥadīth is in Nisāʾī and can remember a few keywords, but cannot remember the whole Ḥadīth, so they would rather just search the keywords (they can remember) inside Nisāʾī and quickly get the desired Ḥadīth, rather than sift through results from all the other Ḥadīth books that we are not interested in. Or sometimes a person may want to see if a specific Ḥadith in Abī Dawūd is Saḥīḥ—not whether a Ḥadīth with the same keywords in another book is Saḥīḥ, but whether the one in Abī Dawūd is Saḥīḥ or not (this is because 2 Aḥādīth with the exact same content can have different narrators in different books, one chain of narration being authentic and another not so). So we definitely need a book filter on your website regardless of the issue I raised in this thread, as it will help a lot of people in their research.
However, now we can also use this same drop-down menu and Search field in order to jump directly to a particular Ḥadīth. If the user selects a particular book from the drop-down menu and, instead of entering a keyword, enters a Ḥadīth number in the Search field, then we can directly jump to that specific Ḥadīth. But if the user enters some term that is not a Ḥadīth reference number, then we can make a keyword search inside the selected book. Or if more than one term is added in the Search field, then we make a keyword search in this case as well. So we have to add the following checks:
```
IF a book is selected in the drop-down menu, AND
IF a single term is searched in the Search field, AND 
IF the term added in Search field is an actual Ḥadīth number that exists within the book that is selected:
THEN jump directly to the Ḥadīth (new functionality)!
ELSE 
IF a particular book is selected in the drop-down menu:
    THEN make a keyword search in that particular book (new functionality)!
ELSE IF "All Books" is selected in the drop-down menu:
    THEN make a keyword search in all books (current sunnah.com functionality)!
```
The "alternative" idea I shared in a previous comment required that the user enter, for example, bukhari:2998 in the Search field to jump directly to the Ḥadīth. I know that this is quite easy to understand and follow for programmers like us, but this is still a tad too technical for a non-tech-savvy person. However, my current solution (the one I am sharing in this comment) is intuitive for everybody. They have a book selector and they can either enter keywords to search Ḥadīth text, or enter a number to directly jump to a Ḥadīth in the book they have selected. No specific search format needs to be listed or explained anywhere, nor does it need to be learned by the user in order to benefit from all of these useful functionalities. It's simple and intuitive for everyone to use—a good User Experience (UX) design.
It will be important that we add a sentence and/or examples on the right side of the Search field to mention both functionalities. For example, we can write: Enter keyword(s) to search, or a Ḥadīth number to jump to it.
We can attach the same drop-down menu to the top-right search box as well, the one that shows in pages other than the Home page, with the same functionality as outlined above (see screenshot below).

Screenshot 2020-10-03 000837

If you guys decide that this is a task worth implementing on sunnah.com, if you wish, you may assign it to me, and I will do my best, in-shāʾAllāh.

@naushervan JazakAllah for doing the due diligence with the idea before submitting it.

The problem of not being able to search within a book has been on our minds as well. We decided to incorporate it with search filters, another feature we've been planning to implement. Instead of adding more functions to the search bar, we'll simply show filtering options based on the results on the search results page where users may add/remove criteria to refine their searches. Alongside collections, these will also contain more options like Grades.

We can talk about more details over at Slack if you're interested in working on this issue.

Sure, I can join you on Slack with your guidance. I would love to work on it.

This was just a suggestion from my side—project heads can make the final decision. My idea was based on providing some basic and useful facilities on the website's interface so that they can be used by non-tech-savvy users—who will be the majority of users. By the Will of Allāh, this idea provides both the jump directly to Ḥadīth functionality as well as keyword Search with book filtering, with just the addition of a SINGLE UI element (drop-down menu). Things will remain almost as simple as before for the non-tech-savvy users. This idea can be discussed further and refined if there are issues or shortcomings with it.

Largely completed in https://github.com/sunnah-com/website/commit/096c539abe7fe71b3ffa46ad78351e73152f5d7c. We can discuss a UI option for this in another issue in the coming redesign iA.

sunnah-com / website

Go directly to a Ḥadīth using its Reference Number #56